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实现。基本上点击，div隐藏起来，其他人出现。

我的问题是，在技巧塔上，有一个添加技能的方法，当我点击它时，它会刷新页面，当它发生时，它会让我回到credsTab，当页面是默认值时加载。

我想知道这是否是一种方式，以便在刷新时，它将保留在技能标签上。

Answer 1

保持状态，可以通过fragment URLs或HTML5 history完成。

例如，打开skills标签，将片段更改为#skills，这将保持刷新。然后检查window.location.hash中的onLoad以确定您的网页应处于什么状态。

---

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