Question

有一段时间我正在尝试找到我需要的东西，并检查了很多链接@stackoverflow，@ google＆amp;等，但每次有些事情都不能100％工作

所以问题是关于制作显示/隐藏DIV，其中只有一个会立即打开+可以在按下相同的链接时关闭，活动的DIV链接应该改变它的风格。

最知名的人之一是： http://dimdajdeneg.com/temp/menu.html 但它并没有改变“show 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

我在链接中尝试了编码：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);
    }
});}

尽管向下滑动i have used toggle（）`;

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

Answer 3

如果我已正确理解你的问题..

将此添加到您的.click()活动：

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

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

});

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

显然你需要isActive类的CSS！

一次显示/隐藏一个DIV，改变链接样式

3 个答案: