Javascript 切换多个div以显示隐藏

好的，我有多个div（7），我想切换到show-hide。如果一个div是打开的，其余部分应该隐藏，当我打开一个新div时，其他部分应该隐藏。我已经能够通过下面的jquery实现这一点

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

    })
}

其中，

.head

是每个div的标题，

.Content

是div的类。通过从

.head（）

调用

showDivs（）

，我已经让它完美地工作了。现在的问题是，在我页面的左侧，我设置了

ulli

。我有7个

li

项，对应于7个div。我的意思是，单击第一个

li

时，相应的

div

应打开，其他应隐藏，单击第二个

li

时，第二个

div

应打开，其他应隐藏

有人知道如何让这些div在左边的

li

项的动作中显示隐藏吗。我知道我必须为

showDivs（）

传递参数，但不知道如何传递

---

感谢您的帮助

如果您将li和相应的DIV设置为相同的

类

，那么您可以这样说

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

})

---

}

如果你给li和相应的div赋予相同的

类，那么你可以说

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

})

}
为每个列表项指定一个id，为每个项目容器指定一个协同绑定id如何。因此，列表项的id为“item01”。“item07”，内容容器的id为“item01c”。“item07c”。然后你可以做这样的事情：

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

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

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

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

这里可以看到一个工作示例：
给每个列表项分配一个id，给每个项目容器分配一个协同绑定id如何。因此，列表项的id为“item01”。“item07”，内容容器的id为“item01c”。“item07c”。然后你可以做这样的事情：

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

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

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

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

这里可以看到一个工作示例：
如果我正确理解您的HTML结构，它看起来如下所示：

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

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

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

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

在这里，我将列表隐式地与标题关联，通过它们在容器中的位置。因此，第一个
li
与class=“head”的第一个
div
相关，第二个与第二个相关，等等。我通过使用来知道单击了哪个
li
，然后使用查找相关的
div.head

从结构上而不是使用
id
值进行维护，使其更易于维护。不过，您也可以通过给每个
li
一个
data div
属性指定相关div的
id
值来实现：

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

从HTML5开始有效，但现在所有浏览器都支持它们。（data-*

是一种尝试，通过给人们提供一种有效的方法来编码和控制人们对无效属性的使用，而不会与规范未来的添加内容相冲突。）

如果我正确理解了您的HTML结构，它看起来如下：

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

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

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

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

在这里，我将列表隐式地与标题关联，通过它们在容器中的位置。因此，第一个

li

与class=“head”的第一个

div

相关，第二个与第二个相关，等等。我通过使用来知道单击了哪个

li

，然后使用查找相关的

div.head

从结构上而不是使用

id

值进行维护，使其更易于维护。不过，您也可以通过给每个

li

一个

data div

属性指定相关div的

id

值来实现：

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

---

从HTML5开始有效，但现在所有浏览器都支持它们。（数据-*这件事是试图通过给人们一种有效的方式来编码和控制人们对无效属性的使用，而不会与规范未来的添加内容相冲突。）

我相信这就是

.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();
        }); 
    });
});

---

看看小提琴：

我相信这就是

.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();
        }); 
    });
});

看一看fiddle:

如果您想像前面有人建议的那样使用.index（），那么我相信这将是最简单的方法（请在此处查看）：

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

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

这里更新了代码 *编辑结束*

这是基于html的，如下所示：

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

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

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

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

项目01
项目02
项目03
项目04
项目05
项目06
项目07

标题1
内容1
标题2
内容2
标题3
内容3
标题4
内容4
标题5
内容5
标题6
内容6
标题7
内容7

如果您想使用前面有人建议的.index（），那么我相信这将是最简单的方法（请在此处查看）：

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

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

这里更新了代码 *编辑结束*

这是基于html的，如下所示：

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

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

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

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

项目01
项目02
项目03
项目04
项目05
项目06
项目07

海德