Довольно простой вопрос от новичка здесь.Мне нужна ваша помощь в изменении JavaScript в приведенном ниже коде, чтобы первый столбец (id = "First Column") отображался слева для всех выбранных параметров.Я искал несколько тем и сайтов, но не смог взломать это.
Также хотел бы знать, будет ли код Javascript лучше взломать это или Jquery будет лучше, если мне нужно использовать это наWordPress сайт.Большинство людей, предлагающих JS лучший вариант для Wordpress, задавались вопросом о том же.
Я уверен, что это довольно простой запрос, и любая помощь с этим была бы очень признательна.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
.inv {
display: none;
}
</style>
<body>
<select id="target">
<option value="">Select...</option>
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
<select>
<div id="First Column" class="inv">
<ul class="cd-features-list">
<li>Dis</li>
<li>Wea</li>
<li>Tra</li>
</ul>
</div>
<div id="content_1" class="inv">Option 1
<ul class="cd-features-list">
<li>Option 1 Dis</li>
<li>Option 1 Wea</li>
<li>Option 1 Tra</li>
</ul>
</div>
<div id="content_2" class="inv">Option 2
<ul class="cd-features-list">
<li>Option 2 Dis</li>
<li>Option 2 Wea</li>
<li>Option 2 Tra</li>
</ul>
</div>
<div id="content_3" class="inv">Option 3
<ul class="cd-features-list">
<li>Option 3 Dis</li>
<li>Option 3 Wea</li>
<li>Option 3 Tra</li>
</ul>
</div>
<script>
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
</script>
</body>
</html>