好的，所以我有多个 div（7），我想切换为显示隐藏。如果一个 div 打开，其余的应该隐藏，当我打开一个新的 div 时，其他的应该隐藏。我已经能够用下面的 jquery 来完成这个
function showDivs() {
$(".head").click(function() {
$(".Content").hide();
$(this).next().fadeIn("slow");
})
}
其中.head是每个 div 的标题，.Content是 div 的类。我已经让它完美地工作了，通过showDivs()从.head()现在调用问题是在我页面的左侧，我已经ul li设置了。我有 7li个项目，对应于 7 个 div。我的意思是点击第li一个对应的div应该打开，其他应该隐藏，点击第二li个div应该打开第二个，其他隐藏。
有谁知道如何使这些 div 隐藏在li左侧项目的操作上。我知道我必须为 传递参数showDivs()，但不知道如何？
帮助表示赞赏
我相信这就是.index()发挥作用的地方：
$(function() {
$('ul li').each(function() {
$(this).click(function(e) {
var i = $(this).index();
$('div').hide();
$('div:eq('+i+')').show();
});
});
});
这是一个非常基本的标记，但我相信你可以弄清楚如何让它与你的代码一起工作。希望我有所帮助！
编辑：在看过你的小提琴之后，我想我完全知道你想要什么：
$(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/
如何为每个列表项分配一个 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
如果我正确理解您的 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>
...只有七个项目而不是四个。
如果是这样，这将做到（实时副本）：
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单击了哪个，然后div.head使用:eq.
从结构上而不是用id值来做它更容易维护。但是，或者，您可以通过为每个属性赋予相关 divli的值来做到这一点：data-divid
<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>
然后（现场副本）：
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-*属性从 HTML5 开始有效，但所有浏览器现在都支持它们。（data-*事情是试图编纂和统治人们对无效属性的使用，通过为他们提供一种有效的方式来做到这一点，而不会与未来对规范的补充发生冲突。）
如果您想按照之前某人的建议使用 .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();
})
* EDIT START * 要让内容在点击标题时切换，请使用：
$("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>
您可以使用这个简单的方法显示和隐藏多个 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">×</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">×</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>
如果你给 li 和相应的 div 相同class，那么你可以说类似
function showDivs() {
$("li").click(function() {
$(".Content").hide();
clickedID = $(this).attr("class");
$('div#'+clickedID).fadeIn("slow");
})
}