javascript - 使用 show.hide 显示 div 时出现问题？

Question

嗨，我有一些 javascript，它可以在具有 5 个 div 的独立网页中工作，它的作用是，当选择一个选项时，它将显示一个 div 并根据下拉选择隐藏其他 div。基本上，代码的作用是在下拉列表中选择一个扇区，将显示相应的 DIV，例如酒吧。

我遇到的问题是在我希望这个工作的网页中，我有很多 Div 标签，当页面加载时，页面上的所有 Div 都被隐藏，显然我不想要这个。

任何帮助将不胜感激

在页面加载时隐藏所有 div 的代码是

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

有没有办法解决这个问题，我目前不知道如何解决它。？

JS

<script>

    $(document).ready(function () {

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

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

        $(name).show();
    }

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

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

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

}); 

HTML

<form>
          <p>
          <select id="dropdown" name="dropdown">
              <option value="Pub-Chains" 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 的命名是这样的

Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"

Answer 1

您必须将要参与显示隐藏的 div 分组，以将它们与页面上的其他 div 分开。您可以为它们分配一个公共(public)类并使用该类来隐藏它们。

Div id="Pub-Chains" class="opt"
Div id="Councils" class="opt"
Div id="Property" class="opt"
Div id="Various" class="opt"
Div id="Universitys" class="opt"

$('div.opt').hide();