jquery隐藏所有打开的div并切换

我有2个链接，根据他们点击哪个链接要关闭所有其他链接并仅显示该链接的信息。

例：

 Show UPS info Show Fedex info 
the info for ups
 
the info for fedex
  

任何想法如何使用Jquery切换点击其中一个链接并隐藏所有其他链接（如果打开）。 我只想一次显示一种送货方式的信息。 此外，我想要一个用户单击showall的选项，如果可能的话，显示所有这些选项。 提前致谢….

Answer 1

 $(".shipping-container a").click(function() { $("div.info").hide(); $("div." + this.className).show(); }); 

你可以在这里试试。

Answer 2

 $(".shipping-container > a.ups").click(function() { $(".shipping-container > .info").hide(); $(".shipping-container > .ups.info").show(); return false; }); $(".shipping-container > a.fedex").click(function() { $(".shipping-container > .info").hide(); $(".shipping-container > .fedex.info").show(); return false; }); $(".shipping-container > a.showall").click(function() { $(".shipping-container > .info").show(); return false; }); 

或者，如果您想要shiny的动画（以及轻松添加更多运输类型的能力）：

 ["ups", "fedex"].forEach(function(method) { $(".shipping-container > a."+method).click(function() { $(".shipping-container > .info:not(."+method+")").slideUp("slow"); $(".shipping-container > ."+method+".info").slideDown("slow"); return false; }); }); $(".shipping-container > a.showall").click(function() { $(".shipping-container > .info").slideDown("slow"); return false; }); 

这里有一个略微修改的例子。

Answer 3

与上面几乎相同

 $(".shipping-container a").click(function() { $("div.info").hide().filter("div." + this.className).show(); }); 

我不知道这是否比重新选择div更有效……它可能是。

此外，如果html是实际的，你可能想要使用像兄弟姐妹这样的方法：

 $(".shipping-container a").click(function() { $(this).siblings("div.info").hide().filter("div." + this.className).show(); }); 

我觉得它更快。