Question

好的，所以我有多个div（7），我想为show hide切换。如果一个div是开放休息应该隐藏，当我打开一个新的div时，其他人应该隐藏。我已经能够使用下面的jquery

来实现这一点

function showDivs() {
    $(".head").click(function() {
        $(".Content").hide();
        $(this).next().fadeIn("slow");

    })
}

其中.head是每个div的标头，.Content是div的类。我通过showDivs()拨打.head()来完美地完成工作现在问题是，在我页面的左侧，我设置了ul li。我有7个li项，对应7个div。我的意思是点击第一个li相应的div应该打开，其他人应该隐藏，点击第二个li第二个div应该打开，其他人隐藏。

是否有人知道如何让这些div显示隐藏在左侧li项的操作上。我知道我必须传递showDivs()的参数，但不知道怎么做？

帮助表示赞赏

Answer 1

我相信这是.index()发挥作用的地方：

$(function() {
    $('ul li').each(function() {
        $(this).click(function(e) {
            var i = $(this).index();
            $('div').hide();
            $('div:eq('+i+')').show();
        });
    });
});

这是一个非常基本的标记，但我相信你可以弄清楚如何使用你的代码。希望我帮忙！

http://jsfiddle.net/Z3Hj7/

编辑：看过你的小提琴之后，我想我确实想要你想要的东西：

$(function() {
    $('ul li').each(function() {
        $(this).click(function(e){
            e.preventDefault();
            var i = $(this).index();
            $('.content').hide();
            $('.head:eq('+i+')').next().show();
        }); 
    });
});

看看小提琴：http://jsfiddle.net/DTcGD/25/

Answer 2

如何为每个列表项指定一个id，并为每个项容器指定一个相应的id。因此，您的列表项的ID为“item01”..“item07”，您的内容容器的ID为“item01c”..“item07c”。然后你可以这样做：

$("li").click(function() {
    showDivs($(this).attr("id"));
})

function showDivs(callerId) {
  $(".content").hide();
  $(".content", "#" + callerId + "c").fadeIn();  
}

可以在此处查看工作示例：http://jsfiddle.net/ECbkd/5/ 1

Answer 3

如果我正确理解您的HTML结构，它看起来像这样：

<!-- The list... -->
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
  <div class="head">Header One</div>
  <div class="Content">Content One</div>
  <div class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

......只有七个而不是四个。

如果是这样，这样做（live copy）：

jQuery(function($) {

  $(".Content").hide();

  $("li").click(function() {
    showDivs($("#container div.head:eq(" + $(this).index() + ")"));
  });
  $(".head").click(function() {
    showDivs($(this));
  });

  function showDivs(head) {
    $(".Content").hide();
    head.next().fadeIn("slow");
  }

});

在那里，我将列表隐含地关联到它们在容器中的位置。因此，第一个li与第一个div相关，其中class =“head”，第二个与第二个相关，等等。我正在通过使用index来了解哪个{{1}单击，然后使用:eq查找相关的li。

在结构上而不是使用div.head值进行操作会使维护更容易。但是，您可以通过为每个id li属性提供相关div的data-div值来实现此目的：

id

然后（live copy）：

<ul>
  <li data-div="h1">One</li>
  <li data-div="h2">Two</li>
  <li data-div="h3">Three</li>
  <li data-div="h4">Four</li>
</ul>
<div id="container">
  <div id="h1" class="head">Header One</div>
  <div class="Content">Content One</div>
  <div id="h2" class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div id="h3" class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div id="h4" class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

data-* attributes从HTML5开始有效，但所有浏览器现在都支持它们。（jQuery(function($) { $(".Content").hide(); $("li").click(function() { showDivs($("#" + $(this).attr("data-div"))); }); $(".head").click(function() { showDivs($(this)); }); function showDivs(head) { $(".Content").hide(); head.next().fadeIn("slow"); } });事物试图通过给予他们一种有效的方式来编写和统治人们对无效属性的使用，而不会与未来对规范的添加相冲突。）

Answer 4

如果您想使用之前建议的.index（），那么我相信这将是最简单的方法（请在此处查看http://jsfiddle.net/ECbkd/7/）：

$("li").click(function() {
    $(".content").hide();
    $('.item').eq($(this).index()).children('.content').fadeIn();
})

您可以添加此项，以便在点击标题时也可以显示内容：

$("h2", ".container").click(function() {
    $(".content").hide();
    $(this).parent().children('.content').fadeIn();
})

*编辑开始* 要在内容上切换内容，请点击标题：

$("h2", ".container").click(function() {
    $(".content").not($(this).parent().children('.content')).hide();
    $(this).parent().children('.content').toggle();
})

此处更新了代码 http://jsfiddle.net/ECbkd/8/ *编辑结束*

这是基于这样的html：

<ul>
    <li>Item 01</li>
    <li>Item 02</li>
    <li>Item 03</li>
    <li>Item 04</li>
    <li>Item 05</li>
    <li>Item 06</li>
    <li>Item 07</li>
</ul>
<div class='container'>
    <div class='item'>
        <h2>Header 1</h2>
        <div class='content'>Content 1</div>        
    </div>        
    <div class='item'>
        <h2>Header 2</h2>
        <div class='content'>Content 2</div>       
    </div>
    <div class='item'>
        <h2>Header 3</h2>
        <div class='content'>Content 3</div>       
    </div>
    <div class='item'>
        <h2>Header 4</h2>
        <div class='content'>Content 4</div>       
    </div>
    <div class='item'>
        <h2>Header 5</h2>
        <div class='content'>Content 5</div>       
    </div>
    <div class='item'>
        <h2>Header 6</h2>
        <div class='content'>Content 6</div>       
    </div>
    <div class='item'>
        <h2>Header 7</h2>
        <div class='content'>Content 7</div>       
    </div>

</div>

Answer 5

您可以使用此简单方法显示和隐藏多个div

function w3_open() { 
     document.getElementById("id01").style.display = 
    "block"; document.getElementById("id02").style.display = "block"
     }

确保您正在使用w3.css

<button onclick="w3_open()" class="w3-button w3-opacity w3-black">Yesterday</button>
<div id="id01" class="w3-panel w3-white w3-card w3-display-container">
<span onclick="document.getElementById('id01').style.display='none'" 
    class="w3-button w3-display-topright">&times;</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<div id="id02" class="test w3-panel w3-white w3-card w3-display- 
 container">

<span onclick="document.getElementById('id02').style.display='none'" 
    class="w3-button w3-display-topright">&times;</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>

Answer 6

如果您将li和相应的div分配给class，那么您可以说

function showDivs() {
$("li").click(function() {
    $(".Content").hide();
    clickedID = $(this).attr("class");
    $('div#'+clickedID).fadeIn("slow");

})

}

切换显示隐藏的多个div

6 个答案: