切换多个 div 以显示隐藏

Question

好的，所以我有多个 div(7)，我想切换显示隐藏。如果一个 div 打开，其余的应该隐藏，当我打开一个新的 div 时，其他的应该隐藏。我已经能够使用下面的 jquery 来完成此操作

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

    })
}

.head 是每个 div 的标题，.Content 是 div 的类。通过从.head() 调用showDivs()，我让它完美运行现在问题是，在我的页面左侧，我设置了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

如果我正确理解你的 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 来知道点击了哪个li，然后查看使用:eq 向上关联div.head。

从结构上而不是使用id 值来实现它更容易维护。但是，或者，您可以通过为每个 li 赋予一个带有相关 div 的 id 值的 data-div 属性来做到这一点：

<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>

然后（live copy）：

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");
  }

});

data-* attributes 自 HTML5 起有效，但目前所有浏览器都支持它们。 （data-* 是一种尝试编纂和统治人们对无效属性的使用，通过为他们提供一种有效的方法来做到这一点，而不会与未来对规范的补充发生冲突。）

Answer 3

如何为每个列表项分配一个 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 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");

})

}