js:隐藏div
我是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');
})这就是我的tabs的javascript实现。基本上，只要点击一下，div就会隐藏起来，其他的就会出现。
我的问题是，在skillsTab上有一个add skills方法，当我单击它时，它会刷新页面，当它这样做时，它会返回到credsTab，这是页面加载时的默认设置。
我想知道这是不是一种方法，这样当它刷新时，它会留在skillsTab上。
回答 3
Stack Overflow用户
发布于 2011-01-26 04:14:15
保持状态不变，这可以通过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库可以为您抽象这一点。
Stack Overflow用户
发布于 2011-01-26 04:11:31
一个初步的建议。让你所有的标签都有相同的类，也许class='toggleableTab'，然后你可以使用
$('.togglableTab').live('click',function(){
$('.togglableTab').not(this).hide();
$(this).show();
});至于页面刷新。考虑使用AJAX在页面上“添加”您的技能，而无需刷新整个页面。
Stack Overflow用户
发布于 2011-01-26 04:28:03
有几个选项卡式解决方案可供您使用-例如，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");https://stackoverflow.com/questions/4798231
复制相似问题
腾讯云开发者
