js：隱藏div

Question

我是Javascript的新手，請耐心等待。

$('#bioContent').css('display','none'); 
$('#skillsContent').css('display','none'); 
$('#credsTab').css('background-color','#fff'); 
$('#credsTab a').css('color','#19d700'); 
$('#bioTab').css('background-color','#ccc'); 
$('#bioTab a').css('color','#444'); 
$('#skillsTab').css('background-color','#ccc'); 
$('#skillsTab a').css('color','#444'); 

$('#credsTab').click(function(){ 
    $('#credsContent').css('display','block'); 
    $('#bioContent').css('display','none'); 
    $('#skillsContent').css('display','none'); 
    $('#credsTab').css('background-color','#fff'); 
    $('#credsTab a').css('color','#19d700'); 
    $('#bioTab').css('background-color','#ccc'); 
    $('#bioTab a').css('color','#444'); 
    $('#skillsTab').css('background-color','#ccc'); 
    $('#skillsTab a').css('color','#444'); 
}) 

$('#bioTab').click(function(){ 
    $('#bioContent').css('display','block'); 
    $('#credsContent').css('display','none'); 
    $('#skillsContent').css('display','none'); 
    $('#bioTab').css('background-color','#fff'); 
    $('#bioTab a').css('color','#19d700'); 
    $('#credsTab').css('background-color','#ccc'); 
    $('#credsTab a').css('color','#444'); 
    $('#skillsTab').css('background-color','#ccc'); 
    $('#skillsTab a').css('color','#444'); 
}) 


$('#skillsTab').click(function(){ 
    $('#skillsContent').css('display','block'); 
    $('#bioContent').css('display','none'); 
    $('#credsContent').css('display','none'); 
    $('#skillsTab').css('background-color','#fff'); 
    $('#skillsTab a').css('color','#19d700'); 
    $('#bioTab').css('background-color','#ccc'); 
    $('#bioTab a').css('color','#444'); 
    $('#credsTab').css('background-color','#ccc'); 
    $('#credsTab a').css('color','#444'); 
}) 

這是我的javascript標籤的實現。基本上點擊，divs隱藏起來，其他人出現。

我的問題是，在skillTab中，有一個添加技巧方法，當我點擊它時，它刷新頁面，當它發生時，它將我帶回到credsTab，頁面的默認值被加載。

我想知道如果這是一種方式，當它刷新時，它會留在skillsTab。

Answer 1

保持狀態，可以通過fragment URLs或HTML5 history完成。

例如，打開skills選項卡將片段更改爲#skills，這將保持整個刷新。然後在你的onLoad檢查window.location.hash來確定你的頁面應該是什麼初始狀態。

---

function switchToTab(tabName) { 
    // DOM/CSS manipulation etc. here 
} 

var tabs = ['bio', 'skills', 'creds']; 
var initialTab = 'bio'; 
for (var i = 0; i < tabs.length; i++) { 
    (function(tabName) { 
     document.getElementById(tabName + 'Tab').addEventListener('click', function() { 
      switchToTab(tabName); 
      location.hash = '#' + tabName; 
     }, false); 
    })(tabs[i]); 
} 

window.addEventListener('load', function() { 
    if (location.hash[0] == '#') 
     switchToTab(location.hash.substr(1)); 
}, false); 
window.addEventListener('hashchange', function() { 
    if (location.hash[0] == '#') 
     switchToTab(location.hash.substr(1)); 
    else 
     switchToTab(initialTab); 
}, false); 

未經檢驗的，並且有大量的JS庫的外面，摘要離開你。

Answer 2

初步建議。給你所有的選項卡中的同一個班級，也許class='toggleableTab'那麼你可以使用

$('.togglableTab').live('click',function(){ 
    $('.togglableTab').not(this).hide(); 
    $(this).show(); 

}); 

爲頁面刷新。看看如何使用AJAX將您的技能「添加」到頁面上，而無需整頁刷新。

Answer 3

有幾個選項卡式解決方案已經到位，您可以使用 - 例如，http://jqueryui.com/demos/tabs/。 JQuery UI是爲您完成大量這項工作的好方法。

如果你想自己做，我也會建議使用類的解決方案，但與其他建議略有不同。相反，有兩個類，「activeTab」和「tabbable」。在你的CSS中，將「activeTab」定義爲可見，將「tabbable」定義爲隱藏。爲每個標籤分配一個ID和「tabbable」類。在表單中有一個名爲「activeTabId」的隱藏字段。請確保在加載頁面時將其從服務器端傳回，包括在首次加載頁面時將其設置爲默認選項卡。然後，您可以運行在頁面加載下面的代碼，使其都發揮得很好。

$(".tabbable").click(new function(){ 
    $(".tabbable").removeClass("activeTab"); 
    $(this).addClass("activeTab"); 
    $("#activeTabId").val($(this).attr("id")); 
}); 

$("#" + $("#activeTabId").val()).addClass("activeTab");