根据下拉列表显示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>