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

这是一段时间我试图找到我需要的东西，并检查了很多链接@stackoverflow，@google &等，但每次有些东西不工作100％一次显示/隐藏一个DIV，改变链接样式

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

其中一个最知道的是：http://dimdajdeneg.com/temp/menu.html 但它不改变“显示DIV”链接样式&你不能关闭所有DIV的，就像如果第一个是开放的，再次点击就不会关闭打开的一个。

这一次也很有意思：http://dimdajdeneg.com/temp/menu2.html 甚至关闭它的自我，但“秀DIV”链接样式是不可改变

我知道这很简单，但很可能这只是怎么把周一的:) 任何人都可以帮助我？

预先感谢您！

来源

2013-02-18 JU1CY

发布一些实际的代码，并告诉我们你到目前为止有什么？ – adeneo 2013-02-18 17:19:45

[你有什么尝试？]（http://whathaveyoutried.com/） – Khez 2013-02-18 17:19:58

请检查两个链接（http://dimdajdeneg.com/temp/menu.html）＆（http://dimdajdeneg.com/temp/ MENU2。html）抱歉，jsfiddle有一些临时问题 – JU1CY 2013-02-18 17:22:08

这里是我想出了，它淡出，除了点击一个（内.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-18 17:50:44 Andy

感谢它就像我需要的99％，任何使它工作的机会，首先它会消失，而不是另一个DIV淡出？当你选择另一个DIV显示时，你会看到两个FOS一秒钟？ – JU1CY 2013-02-18 17:57:53

@AleksandrSubots当然，我添加了一个顺序渐变模块，但它有点不同。 – Andy 2013-02-18 18:06:23

工作gr8，只是最后的愿望，任何机会改变标记为DIV与李nk里面+为它添加默认类，一种非活动，所以点击它，它会得到新的类，关闭它，它会回到默认？ – JU1CY 2013-02-18 18:15:04

我试图在链接编码：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（）`的;

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

来源

2013-02-18 17:42:24 Pandian

谢谢！但仍然同样的问题：你可以打开多个DIV +活动链接不可更改... :( – JU1CY 2013-02-18 17:47:48

@AleksandrSubots：我更新了我的代码尝试提琴现在... http://jsfiddle.net/RYh7U/ 92/ – Pandian 2013-02-18 17:55:50

yeap，但仍然活动链接“显示DIV”stile是不可更改的，当活动:( – JU1CY 2013-02-18 18:04:24

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

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

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

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

}); 

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

显然，你将需要CSS为isActive类！

来源

2013-02-18 17:50:55 Zac

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

回答

相关问题