Javascript jQuery切换Divs

在我正在做的页面中实现一些jQuery时遇到了一个小问题

我要让它做我想做的事已经走了一半了，但我的头绕不开最后一部分。虽然我已经使用jQuery的片段有一段时间了，但在编写自己的代码时，我还是相当新的

基本上，我希望通过单击相关链接打开默认隐藏的4个Div，但每次只显示一个Div，因此如果已打开Div1，单击Div2按钮将关闭Div1并打开Div2

还有一个第五个按钮，当没有Div打开时打开Div1，或者如果任何Div打开，则关闭该打开的Div

我一直在看这些页面寻求帮助，但没有什么是我想要的：

www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

webdesignerwall.com/tutorials/jquery-tutorials-for-designers

目前，我已经使div出现在一个按钮点击上，但仅此而已，我无法使这些示例中的切换逻辑在我的代码中起作用

我在这里设置了一个JSFIDLE：

---

提前感谢

解决方案非常简单：

• 关闭所有东西，不管哪个是打开的
• 只打开你需要的那一个

---

解决方案非常简单：

• 关闭所有东西，不管哪个是打开的
• 只打开你需要的那一个

---

我认为您正在寻找的是“隐藏”选择器，例如：

if( jqueryObject.is(':hidden') ) {
    // it's hidden
} else {
    // it's not
}

---

这也适用于is（“：visible”）

我认为您要查找的是“隐藏”选择器，例如：

if( jqueryObject.is(':hidden') ) {
    // it's hidden
} else {
    // it's not
}

这也适用于is（“：visible”）

Div 1
第2组
第3组
第4组
var showDiv=函数（n）{
var i；
对于（i=1；i<5；i++）{
如果（i==n）
$（'#div'+i）.show（）；
其他的
$（'#div'+i）.hide（）；
}    
}

第1部分
第2组
第3组
第4组
var showDiv=函数（n）{
var i；
对于（i=1；i<5；i++）{
如果（i==n）
$（'#div'+i）.show（）；
其他的
$（'#div'+i）.hide（）；
}    
}

你很接近，但有一个更干净的方法：

---

你很接近，但有一个更干净的方法：

---

您只需隐藏所有与

$（'.toggle content'）匹配的div

您只需隐藏所有与

$（'.toggle content'）匹配的div

非常感谢您的解决方案。特别是jbabey和Bergi，非常感谢，这是我第一次在Stackoverflow上发布，对答案的速度和质量感到惊讶。@Spitfire答案的质量将反映问题的质量和努力：）非常感谢大家的解决方案。特别是jbabey和Bergi，非常感谢，这是我第一次在Stackoverflow上发布，对答案的速度和质量感到惊讶。@Spitfire答案的质量将反映出问题的质量和努力：）

<div id='div1' style='display:none;'>Div 1</div>
<div id='div2' style='display:none;'>Div 2</div>
<div id='div3' style='display:none;'>Div 3</div>
<div id='div4' style='display:none;'>Div 4</div>

<a href='showDiv(1);'>Show Div 1</a>
<a href='showDiv(2);'>Show Div 2</a>
<a href='showDiv(3);'>Show Div 3</a>
<a href='showDiv(4);'>Show Div 4</a>

<script>
var showDiv = function(n) {
    var i;
    for (i = 1; i < 5; i++) {
        if (i == n)
            $('#div' + i).show();
        else
            $('#div' + i).hide();
    }    
}
</script>

$('#toggle-image').on('click', function () {
    if ($('.toggled').length === 0) {
        // none are open, open the first
        $('.toggle-content').eq(0).slideToggle().addClass('toggled');
    } else {
        // one is open, hide it
        $('.toggled').slideToggle().removeClass('toggled');
    }
});

$('li > a').on('click', function () {
    // extract the number
    var num = parseInt(this.id.replace('toggle-', ''), 10);

    // cancel the event if they clicked the link that is already open
    if ($('.toggle-content').eq(num - 1).hasClass('toggled')) {
        return false;    
    }

    // hide the old one
    $('.toggled').slideToggle().removeClass('toggled');

    // show the new one
    $('.toggle-content').eq(num - 1).slideToggle().addClass('toggled'); 
});