jQuery技术:javascript / jquery简写代码和活动函数

给每个div另一个类：

然后：

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

看起来你要做的就是显示一个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; }); 

实例