javascript / jquery简写代码和活动函数

我有这个代码，我想知道是否有更短的编写方式？

还有哪些代码，我需要在相关的div上使活动标签保持活动状态

谢谢

$(document).ready(function () { $(".overveiw").click(function () { $(".div1").show(); $(".div2").hide(); $(".div3").hide(); $(".div4").hide(); $(".div5").hide(); }); $(".tour").click(function () { $(".div2").show(); $(".div1").hide(); $(".div3").hide(); $(".div4").hide(); $(".div5").hide(); }); $(".websites").click(function () { $(".div3").show(); $(".div1").hide(); $(".div2").hide(); $(".div4").hide(); $(".div5").hide(); }); $(".faq").click(function () { $(".div4").show(); $(".div1").hide(); $(".div3").hide(); $(".div2").hide(); $(".div5").hide(); }); $(".support").click(function () { $(".div5").show(); $(".div1").hide(); $(".div3").hide(); $(".div4").hide(); $(".div2").hide(); }); }); 

Answer 1

给每个div另一个类：

然后：

 $(".overveiw").click(function () { $(".new_class").hide(); $(".div1").show(); }); 

Answer 2

看起来你要做的就是显示一个div并在点击其他元素时隐藏其他一些 – 例如，标签界面。

简单的方法是使用某人已经为你构建的东西，比如jQuery UI的标签 。

但是你也可以通过给出一些共同的信息，轻松地将div显示为显示/隐藏（面板）和你点击的div（选项卡）。 例如，如果在面板上放置一个属性来标识它们所属的选项卡，则会缩短：

 $(".overview, .tour, .websites, .faq").click(function() { var thisTab = $(this).attr("data-panel"); var container = $("#container"); container.find("div").hide(); container.find("div[data-panel=" + thisTab + "]").show(); }); 

…如果您在选项卡和面板上同意放置data-panel属性，则有效。 实例

但是如果你在没有JavaScript的情况下运行那个实例，请注意它不会很好地降级。 这就是为什么你通常会看到这个用导航的列表和锚点完成的，例如，像这样：

 
 
Overview
 
Tour
 
Websites
 
FAQ
  
 
The overview panel
 
The tour panel
 
The websites panel
 
The FAQ panel
  

使用此代码：

 $("#container div:not(#overview)").hide(); $("#tabs > li > a").click(function() { var thisTab = this.href; var index = thisTab.indexOf("#"); if (index >= 0) { thisTab = thisTab.substring(index + 1); } $("#container div").hide(); $("#" + thisTab).show(); return false; }); 

实例