Javascript 隐藏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');
})

这是我的标签的javascript实现。基本上，只要单击，div就会隐藏起来，其他div就会出现

我的问题是，在skillsTab上有一个addskills方法，当我点击它时，它会刷新页面，当它刷新页面时，它会将我带回credsTab，这是加载页面时的默认设置

---

我想知道这是否是一种方法，这样当它刷新时，它将保持技能稳定。

一个初步建议。将所有选项卡设置为同一类，可能是

class='toggleableTab'

，然后您可以使用

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

});

---

至于页面刷新。考虑使用AJAX在页面上“添加”您的技能，而无需刷新整个页面。

初步建议。将所有选项卡设置为同一类，可能是

class='toggleableTab'

，然后您可以使用

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

});

---

至于页面刷新。研究使用AJAX在页面上“添加”您的技能，而无需刷新整个页面。

保持状态，这可以通过或完成

e、 例如，打开

skills

选项卡，将片段更改为

#skills

，这将在刷新期间保留。然后在

onLoad

中检查

window.location.hash

，以确定页面应处于的初始状态

---

功能开关totab（tabName）{
//DOM/CSS操作等
}
变量标签=['bio'、'skills'、'creds']；
var initialTab='bio'；
对于（变量i=0；i

---

未经测试，有很多JS库可以为您提取这些信息。

保持状态，这可以通过或完成

e、 例如，打开

skills

选项卡，将片段更改为

#skills

，这将在刷新期间保留。然后在

onLoad

中检查

window.location.hash

，以确定页面应处于的初始状态

---

功能开关totab（tabName）{
//DOM/CSS操作等
}
变量标签=['bio'、'skills'、'creds']；
var initialTab='bio'；
对于（变量i=0；i

---

未经测试，有很多JS库可以为您抽象出这些内容。

有几种选项卡式解决方案已经到位，您可以使用它们，例如。jQueryUI是为您完成大量工作的一种很好的方式

如果您想自己做，我也会建议使用类的解决方案，但与其他建议略有不同。相反，有两个类，“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");

---

您可以使用几个选项卡式解决方案，例如。jQueryUI是为您完成大量工作的一种很好的方式

如果您想自己做，我也会建议使用类的解决方案，但与其他建议略有不同。相反，有两个类，“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");

---

只是一个提示，而不是执行

$（'bioContent'）.css（'display'，'none'）使用$.hide和$.show，如``（“#bioContent”）.hide（）`“跟我裸体”不，谢谢。我希望你的意思是“容忍我”；o） 我想他的意思是“与我赤裸裸”，如“与我隐藏/显示css”@kjy112：我会接受任何看似暗示的解释。当其他人看到无限制的相同
$.css
调用时，他们会退缩吗？为什么没有使用
addClass
和
removeClass
？！？只是一个提示，而不是执行
$（'bioContent'）.css（'display'，'none'）使用$.hide和$.show，如``（“#bioContent”）.hide（）`“跟我裸体”不，谢谢。我希望你的意思是“容忍我”；o） 我想他的意思是“与我赤裸裸”，如“与我隐藏/显示css”@kjy112：我会接受任何看似暗示的解释。当其他人看到无限制的相同
$.css
调用时，他们会退缩吗？为什么没有使用
addClass
和
removeClass
？！？你能详细说明一下吗？我是新来的。似乎单击它只会切换到数组的最后一个元素，而不会切换到其他元素。