根据下拉选择显示/隐藏网站的部分

Question

试图弄清楚如何在我的网站页面上显示/隐藏部分，在这里引用以下代码：如何使用jQuery显示和隐藏基于所选选项的元素？

我不确定把我的数据节ID放在哪里，这样它就成了页面的整个部分，而不是颜色输出。

$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

Answer 1

考虑以下内容。

$(function() {
$('#colorselector').change(function() {
$('.section').hide();
if ($("option:selected", this).index() > 0) {
$('#section-' + $(this).val()).show();
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
<option>Select Section...</option>
<option value="1">Section 1</option>
<option value="2">Section 2</option>
<option value="3">Section 3</option>
</Select>
<div id="section-1" class="section" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat nec magna ut tincidunt. Pellentesque sed bibendum odio. Vivamus sodales aliquam lectus eu consectetur. Donec eu felis vitae dolor ultrices lobortis. Nulla eget suscipit sapien, et lacinia dolor. Integer auctor magna vitae iaculis auctor. Proin nibh dui, tincidunt vel arcu vitae, varius tempus mauris. Nam sed magna velit. Morbi vitae elit vitae neque feugiat pretium id id augue. Praesent quis arcu varius, vulputate metus venenatis, eleifend dolor. Proin feugiat semper nibh ut ornare. Nunc imperdiet, leo finibus consequat accumsan, quam augue venenatis odio, sit amet interdum purus enim sit amet nibh. Maecenas volutpat est vitae nulla iaculis, vitae sagittis mauris condimentum.</div>
<div id="section-2" class="section" style="display:none">Nunc non sem vitae ante eleifend mattis eget non orci. Nunc ac libero in erat feugiat placerat quis sit amet lacus. Nulla ut dolor scelerisque, euismod justo id, dapibus elit. Fusce fringilla tincidunt velit. Maecenas scelerisque vehicula maximus. Fusce eget elementum nibh. Donec eget diam iaculis, rhoncus orci nec, bibendum ipsum. Quisque auctor non mauris at tempus. Nulla sit amet leo venenatis, malesuada libero et, volutpat libero. Nullam malesuada posuere tristique.</div>
<div id="section-3" class="section" style="display:none">Aliquam lacus elit, gravida sagittis nisi tempor, porta pellentesque nulla. Integer justo magna, blandit quis ante euismod, tincidunt tincidunt ipsum. Nam faucibus, felis ac accumsan egestas, neque ipsum ornare tortor, nec placerat nisi felis vel augue. Aliquam vitae maximus purus, et imperdiet magna. Vestibulum sit amet massa eleifend, semper eros rhoncus, pretium sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam rhoncus ut erat id consequat. Maecenas a iaculis lorem. Phasellus nulla nulla, molestie sit amet ex nec, ultrices eleifend augue. Aliquam velit purus, congue non ex id, pretium vehicula augue. Vestibulum accumsan orci ut suscipit malesuada. Duis rutrum sagittis orci, quis tincidunt nibh gravida ac. In nec est purus. Morbi egestas, purus eget varius sodales, nunc purus ultricies dolor, vitae ornare nisl urna eget odio. Pellentesque bibendum, dui a vestibulum sollicitudin, nunc augue faucibus felis, id tincidunt metus est et ex. </div>

这是意料之中的事。您可以将颜色替换为"数据"，将值替换为要使用的节或ID的名称。