一次显示/隐藏一个 DIV，更改链接样式 [关闭]

Question

我有一段时间试图找到我需要的东西，并检查了很多链接@stackoverflow、@google 等，但每次都无法 100% 工作

所以问题在于制作显示/隐藏 DIV，其中一次只能打开一个 + 可以在按下相同链接时关闭，活动 DIV 链接应该改变它的样式。

最了解的一个是： http://dimdajdeneg.com/temp/menu.html 但它不会改变“显示 DIV”链接样式并且您不能关闭所有 DIV，例如如果第一个是打开的，再次单击它不会关闭打开的一个。

这个也很有意思：http://dimdajdeneg.com/temp/menu2.html 它甚至会自行关闭，但“显示 DIV”链接样式不可更改

我知道这很简单，但可能只是因为星期一 :) 谁能帮帮我？

提前谢谢你！

Answer 1

这是我想出的，它会淡出所有内容，除了点击的那个（在.not() 内），它会被切换。

HTML：

<a href="" data-id="d1">Link 1</a>
<a href="" data-id="d2">Link 1</a>
<a href="" data-id="d3">Link 1</a>
<div id="d1">Div 1</div>
<div id="d2">Div 2</div>
<div id="d3">Div 3</div>

CSS：

a {
    background:blue;
    color:red;
}
.active {
    background:green;
    color:white;
}
div{
    display:none;
}

jQuery：

$('a').click(function(ev){
    ev.preventDefault();
    var id = $(this).data('id');
    $('a').not($(this).toggleClass('active')).removeClass('active');

    // parallel fading:      
    $('div').not($('#'+id).fadeToggle(500)).fadeOut(500);
    // OR
    // sequential fading:
    $.when($('div').not($('#'+id)).fadeOut(500)).done(function(){
        $('#'+id).fadeToggle(500)
    });
});

jsFiddle：

http://jsfiddle.net/fKGc5/

Answer 2

如果我正确理解了您的问题..

将此添加到您的 .click() 事件中：

$('#linkwrapper > a').each(function () { 

$(this).removeClass("isActive");

});

$(this).addClass("isActive");

显然，isActive 类需要 CSS！

Answer 3

我已经尝试了链接中的编码：http://dimdajdeneg.com/temp/menu.html

并修改该代码如下...

function m_slide(m_inactive) {$('.m_box').each(function(index) {
  if ($(this).attr("id") == m_inactive) {
            $(this).toggle("fast");
        }
    else {
            $(this).slideUp(300);
    }
});}

尽管有 Slide-downi have usedtoggle()`;

试试这个小提琴：http://jsfiddle.net/RYh7U/92/