Question

好吧，所以我有一个当前正在运行的下拉列表，当从下拉列表中选择该项时，它会在同一页面上显示隐藏的内容div。问题是我需要能够使用相同的代码作为锚点，或者允许我在从另一个页面引用该页面时调用该特定部分，或者只是在向前移动之后导航回页面。内容。

这是脚本：

<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
</script>

我的网页内容：

<div id="mental_lever_collection">
<div class="menu"><span class="title">Choose a Mental Lever Collection</span>
<select id="category_select" class="select">
<option value="#option1">Mental Levers &amp; Leveraged Thinking</option>
<option value="#option2">Zero Aggression Basics</option>
</select></div>
<div id="option1" class="box">

Some Content
</div>
<div id="option2" class="box">

Some Content
</div>
</div>

如果您对如何进行调整以获得所需效果有任何想法，我们将不胜感激。

Answer 1

Fiddle Demo

试试这个

$(document).ready( function() {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
    var test = $(this).val();
    console.log(test);
$(test).show();
});
});

Answer 2

您的代码中还有一个额外的“＃”。请将$('#'+$(this).val()).show();更改为$($(this).val()).show();

希望这有助于您解决问题：完整的jquery代码

<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$($(this).val()).show();
});
});
</script>

使用锚点＆＃34;选择＆＃34;下拉列表

2 个答案: