javascript - 根据下拉列表显示 div - 脚本不起作用

Question

我正在尝试使用以下脚本根据下拉选择显示 div。它在一个没有任何东西的简单页面上完美运行；但是当我把它放在我正在开发的页面中时，它会弄乱整个页面，使其变黑，并且在 URL 的末尾我得到这个 ...../myPage.html#someIdInThePage 。

JS：

<script type="text/javascript">
    $(document).ready(function () {
        function showTheTab(name) {
            name = '#' + name;
            $('div').not(name).hide();
            $(name).show();
        }

        $('#dropdown').change(function () {
            showTheTab($(this).val());
        });

        showTheTab($('#dropdown').val());

    });
</script>

HTML：

<form>
    <p>
        <select id="dropdown" name="dropdown">
            <option value="Pubs" selected="selected">Pubs</option>
            <option value="Councils">Councils</option>
            <option value="Property">Property</option>
            <option value="Various">Various</option>
            <option value="Universitys">Universitys</option>
        </select>
    </p>
</form>
<div id="Pubs">pubs</div>
<div id="Councils">councils</div>
<div id="Property">property</div>
<div id="Various">various</div>
<div id="Universitys">universitys</div>

Answer 1

此行：$('div').not(name).hide();将隐藏页面上除所选 div 之外的每个 div。您将需要一个更具体的选择器来进行隐藏

例子

Javascript：

$(document).ready(function () {

    function showTheTab( name ) 
    {
        name = '#' + name;

        $('div.Tabs > div').not(name).hide();

        $(name).show();
    }

    $('#dropdown').change( function() {

        showTheTab( $( this ).val() );
    });

    showTheTab( $('#dropdown').val() );

}); 

html:

<form>
      <p>
      <select id="dropdown" name="dropdown">
          <option value="Pubs" selected="selected">Pubs </option>
          <option value="Councils">Councils </option>
          <option value="Property">Property </option>
          <option value="Various">Various </option>
          <option value="Universitys">Universitys </option>
      </select>
      </p>
 </form>

<div class="Tabs">
    <div id="Pubs">pubs</div>
    <div id="Councils">councils</div>
    <div id="Property">property</div>
    <div id="Various">various</div>
    <div id="Universitys">universitys</div>
</div>