在一個頁面中的多個頁面的基於jQuery的導航

我正在創建一個有效的網頁，但它由多個頁面組成。在一個頁面中的多個頁面的基於jQuery的導航

的HTML：

<p class="nav"> 
<a id="1" class="active" href="#">Home</a> 
<a id="2" href="#">Our Designs</a> 
<a id="3" href="#">Our Team</a> 
<a id="4" href="#">Contact</a> 
</p> 
<div id="p1"> 
</div> 
<div id="p2"> 
</div> 
<div id="p3"> 
</div> 
<div id="p4"> 
</div>

的CSS：

#p1, 
#p2, 
#p3, 
#p4{ 
    display:none; 
} 
.pactive{ 
    display:block !important; 
}

jquery的：

$("#1").click(function(){ 
    $(".active").toggleClass("active"); 
    $("#1").toggleClass("active"); 
    $(".pactive").fadeout(200); 
    setTimeout(function(){ 
    $(".pactive").toggleClass("pactive"); 
    }, 200); 
    setTimeout(function(){ 
    $("#p1").toggleClass("pactive"); 
    }, 200); 
    setTimeout(function(){ 
    $(".pactive").fadein(200); 
    }, 200); 
});

有一個爲每個鏈接

我如何得到這個工作？

來源

2013-07-01 spriore

什麼是「pactive」？ – j08691

這裏的想法是，p＃代表一個不同的頁面，p1是主頁.pactive用於使頁面在鏈接被點擊時顯示。想象一下像[鏈接]（http://jqueryui.com/tabs/）這樣的標籤頁面，但作爲一個整體網站。 – spriore

基本上我怎麼都不想點擊它兩次，什麼也沒有顯示 – spriore

這應該工作：

$(".nav").children("a").click(function(){ 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
    $(".pactive").fadeOut(200,function(){ 
     $(this).removeClass("pactive"); 
    }); 
    $("#p" + this.id).fadeIn(200,function(){ 
     $(this).addClass("pactive"); 
    }); 
});

我改變了.toggleClass()電話要麼.addClass()或.removeClass()適用於使代碼更易讀...

此外，請請務必正確地撥打.fadeOut()和.fadeIn()，因爲您的代碼有fadeout和fadein（全部小寫）

JSFiddle Demo

來源

2013-07-01 16:15:40 DarkAjax

試試這個：

$(".nav a").click(function(){ 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
    var id = this.id; 
    $(".pactive").fadeOut(200).promise().done(function(){ 
     $(".pactive").toggleClass("pactive"); 
     $("#p"+id).toggleClass("pactive"); 
     $(".pactive").fadeIn(200); 
    }); 
});

而且，除去display : block !important。

在此功能中，this表示單擊的元素。既然你使用了一個數字作爲id（這是一種不好的做法），你可以通過拼接輕鬆地定位他的段落。

小提琴：http://jsfiddle.net/kucx5/1/

來源

2013-07-01 16:02:33

你是對的，因爲我沒有測試它，我看不到沒有調用fadeOut回調。一個承諾雖然做這項工作。感謝你的小提琴，我得到它的工作！ –

@ Karl-AndréGagnon有趣的答案，我從來沒有想過使用'.promise（）'+'.done（）'，但它似乎很有用... +1 – DarkAjax

@darkajax是的，因爲我不加載後沒有'.pactive'，因爲'$（'。pactive'）'爲空，所以fadeOut回調從不會發生。我討厭使用promise而不是calback，但我不想更改DOM或文檔就緒腳本。但是，當你想讓事情總是發生的時候，保證是有用的:) –

在一個頁面中的多個頁面的基於jQuery的導航

回答

相關問題