Question

嗨我有一些javascript可以在一个带有5个div的独立网页中工作，它的作用是当选择一个选项时它将显示一个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>

My Div的名字就像这样命名

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

Answer 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

Answer 2

为所有这个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();

小提琴here ..

Answer 3

您必须将要参与show hide的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();

Answer 4

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

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

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

See it here.

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

Answer 5

$(document).ready(function () {
  var ddl = $("#dropdown");
  $('#' + ddl.val()).show().siblings().hide();
  ddl.change(function () {
  $('#' + $(this).val()).fadeIn().siblings().hide();
 });
});

请参阅demo

使用show.hide显示div的问题？

5 个答案: