2

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

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

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

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

我知道这很简单，但可能只是因为星期一:) 任何人都可以帮助我吗？

先感谢您！

4

3 回答 3

4

这是我想出的，它会淡出所有内容，除了点击的那个（内部.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/

于 2013-02-18T17:50:44.473 回答
0

我已经尝试了链接中的编码：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-down i have usedtoggle()`;

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

于 2013-02-18T17:42:24.220 回答
0

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

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

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

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

});

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

显然，您将需要该isActive课程的 CSS！

于 2013-02-18T17:50:55.650 回答