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");