一次顯示/隱藏一個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，改變鏈接樣式

回答

相關問題