隱藏div並顯示另一個，並更改鏈接類Jquery

我今天一直在研究大多數，但沒有發現太多，所以我想知道你們是否可以提供幫助。隱藏div並顯示另一個，並更改鏈接類Jquery

我有兩個鏈接，我想控制兩個div。我希望它能夠在單擊鏈接時顯示相應的div並激活該鏈接上的「鏈接激活」類。當點擊另一個鏈接時，我希望舊的div淡出，並且與新鏈接相關的新鏈接淡入並重新應用「鏈接激活」類。

HTML：

<a href="#walking" id="walking" class="link-active"><p>Dog Walking</p></a> 
<a href="#grooming" id="grooming"><p>Dog Grooming</p></a> 

<div class="walk"></div> 
<div class="groom"></div>

我明白這個心不是propably所以這裏最好的說明是小提琴來幫助我。

小提琴：http://jsfiddle.net/swift29/LUkk4/1/

乾杯提前

在文檔準備事件

來源

2013-01-06 swift29

該解決方案使用一個簡單的函數來處理fadeIn/fadeOut。它試圖儘可能消除代碼重複。

的Javascript

$("#walking").click(function(){ 
    swap(this, "walk", "groom"); 
}); 

$("#grooming").click(function(){ 
    swap(this, "groom", "walk"); 
}); 

function swap(obj, active, inactive){ 
    $("." + inactive).fadeOut(500, function(){ 
     $("." + active).fadeIn().addClass("link-active"); 
    }); 
    $("#walking, #grooming").removeClass("link-active"); 
    $(obj).addClass("link-active"); 
}

工作實例：http://jsfiddle.net/LUkk4/6/

來源

2013-01-06 16:09:00

歡呼聲中，這個完美的作品 – swift29

@ swift29高興能幫上忙，我沒有更新的解決方案，因此鏈路活動類不會從被刪除#walking和#grooming以外的項目 –

，添加以下代碼來實現所描述的行爲

$('#walking').click(function() 
{ 
    $('.groom').fadeOut(100, function() 
    { 
     $('.groom').removeClass('link-active'); 
     $('.walk').fadeIn(100, function() 
     { 
      $('.walk').addClass('link-active'); 
     }); 
    }); 
    //prevent default click event 
    return false; 
});

同一事件添加到其他分區，只是替換.walk和.groom類名。

來源

2013-01-06 16:06:20

隱藏div並顯示另一個，並更改鏈接類Jquery

回答

相關問題