0

嗨，我有一些JavaScript在一个独立的网页上有5个，它所做的就是选择一个选项，它将显示一个基于下拉选择的div并隐藏其他人。基本上代码所做的是什么时候在下拉列表中选择将显示相应的 DIV，例如 pubs。

我遇到的问题是在我想要这个工作的网页中我有很多 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"
4

5 回答 5

1

试试这个：

$(document).ready(function () {

    function showTab( name ){
       name = '#' + name;
       $(name).siblings().hide(); //<-- hide this way
       $(name).show();
    }

如果这不起作用，那么你可以这样做，只是把它放在外面doc ready handler

    function showTab( name ){
       name = '#' + name;
       $(name).siblings().hide(); //<-- hide this way
       $(name).show();
    }
   $(document).ready(function () {
   // then all your change stuff here
于 2013-01-16T12:05:33.833 回答
1

为所有这些 div 创建一个父 div ...并在选择器中调用它..

试试这个

<div id="tabdivs">
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
</div>

jQuery *更新*

$('#tabdivs').children().not(name).hide();

在这里摆弄..

于 2013-01-16T12:06:20.970 回答
1

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

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();
于 2013-01-16T12:07:08.950 回答
1

如果您的目标<div>都是兄弟姐妹，那么您可以轻松地执行以下操作。

<div>
  <div id="Pub-Chains">
  <div id="Councils">
  <div id="Property">
  ...
</div>


$(function(){
  $("select#dropdown").change(function(){
    $('#' + $(this).val()).show().siblings().hide();
  }).change();
});

看这里。

如果您有更复杂的布局，那么您可以考虑使用类名来对<div>元素进行分组。

于 2013-01-16T12:08:53.783 回答
1 
$(document).ready(function () {
  var ddl = $("#dropdown");
  $('#' + ddl.val()).show().siblings().hide();
  ddl.change(function () {
  $('#' + $(this).val()).fadeIn().siblings().hide();
 });
});

看演示

于 2013-01-16T12:16:16.363 回答