显示/隐藏多个div的更好方法是什么？

我有8个链接，所有这些都需要在点击时显示div。 我希望一次只显示1个div，因此当点击新链接时，当前显示的div将被隐藏并显示一个新的div。 到目前为止，我有一个jQuery解决方案，但它很难看。 有没有更简单/更正确的方法来实现我想要的？

 Click Link
 Click Link 2
 Click Link 3
 Click Link 4
 Click Link 5
 Click Link 6
 Click Link 7
 Click Link 8
 
Test Vid Div

CLOSE
 
Test Vid Div 2

CLOSE 2
 
Test Vid Div 3

CLOSE 3
 
Test Vid Div 4

CLOSE 4
 
Test Vid Div 5

CLOSE 5
 
Test Vid Div 6

CLOSE 6
 
Test Vid Div 7

CLOSE 7
 
Test Vid Div 8

CLOSE 8
 $(document).ready(function(){ $("a.link").click(function(){ $(".testVid").show(); $(".testVid2").hide(); $(".testVid3").hide(); $(".testVid4").hide(); $(".testVid5").hide(); $(".testVid6").hide(); $(".testVid7").hide(); $(".testVid8").hide(); }); $(".close").click(function(){ $(".testVid").hide(); }); $("a.link2").click(function(){ $(".testVid2").show(); $(".testVid").hide(); $(".testVid3").hide(); $(".testVid4").hide(); $(".testVid5").hide(); $(".testVid6").hide(); $(".testVid7").hide(); $(".testVid8").hide(); }); $(".close2").click(function(){ $(".testVid2").hide(); }); $("a.link3").click(function(){ $(".testVid3").show(); $(".testVid2").hide(); $(".testVid").hide(); $(".testVid4").hide(); $(".testVid5").hide(); $(".testVid6").hide(); $(".testVid7").hide(); $(".testVid8").hide(); }); $(".close3").click(function(){ $(".testVid3").hide(); }); $("a.link4").click(function(){ $(".testVid4").show(); $(".testVid2").hide(); $(".testVid3").hide(); $(".testVid").hide(); $(".testVid5").hide(); $(".testVid6").hide(); $(".testVid7").hide(); $(".testVid8").hide(); }); $(".close4").click(function(){ $(".testVid4").hide(); }); $("a.link5").click(function(){ $(".testVid5").show(); $(".testVid2").hide(); $(".testVid3").hide(); $(".testVid4").hide(); $(".testVid").hide(); $(".testVid6").hide(); $(".testVid7").hide(); $(".testVid8").hide(); }); $(".close5").click(function(){ $(".testVid5").hide(); }) ;$("a.link6").click(function(){ $(".testVid6").show(); $(".testVid2").hide(); $(".testVid3").hide(); $(".testVid4").hide(); $(".testVid5").hide(); $(".testVid").hide(); $(".testVid7").hide(); $(".testVid8").hide(); }); $(".close6").click(function(){ $(".testVid6").hide(); }); $("a.link7").click(function(){ $(".testVid7").show(); $(".testVid2").hide(); $(".testVid3").hide(); $(".testVid4").hide(); $(".testVid5").hide(); $(".testVid6").hide(); $(".testVid").hide(); $(".testVid8").hide(); }); $(".close7").click(function(){ $(".testVid7").hide(); }); $("a.link8").click(function(){ $(".testVid8").show(); $(".testVid2").hide(); $(".testVid3").hide(); $(".testVid4").hide(); $(".testVid5").hide(); $(".testVid6").hide(); $(".testVid7").hide(); $(".testVid").hide(); }); $(".close8").click(function(){ $(".testVid8").hide(); }); $(".hideDiv").css('display', 'none'); }); 

在这里小提琴

Answer 1

使用jQuery选择器。 我将所有类属性更改为ID属性，并将1添加到没有数字的那些属性。 这是小提琴。

http://jsfiddle.net/BLXWS/7/

Answer 2

每个div应该有一个类和一个id。 该类应该用于对您拥有的div类型进行分组。 id应该对每个div都是唯一的。

所以，如果你有一些包含汽车照片的div和一些包含松鼠照片的div，你应该有两类div

 
 
 
 
 
 
 // hide squirrels $(".PhotosSquirrels").hide(); // hide cars $(".PhotosCars").hide(); // show single photo $("#Car3").show(); 

Answer 3

• 为所有项目分配一个公共类
• 将点击处理程序一次附加到所有$(".commonClass").click(..)
• 在函数中隐藏所有（使用相同的选择器）并仅显示当前的$(this)

Answer 4

解决方案没有更改html中的任何内容：

 $("a").click(function(){ $('div[class^="testVid"]').hide(); $('div[class="testVid'+ $(this).attr('class').replace(/link/, '') +'"]').show(); }); $('span[class^="close"]').click(function() { $(this).parent().hide(); }); 

我建议你看看jQuery Selectors ，这些可以挽救你的生命。

Answer 5

使用您想要连接/处理的元素具有共同的属性/值。

在你的情况下你的链接和div一起关系是他们的类名称的一部分（链接号和div号;它们隐藏在a和div类名称link1 --> testVid1 ）。

这也是你的链接在一起的内容（在这种情况下，你专注于他们的类名的第一部分）。 所以你不需要每个人的点击function，只需要一个：

 // this selector selects all a tags of which class attribute contains value of "link" $('a[class*="link"]') 

关闭你的div的跨度也是如此：

 $('span[class*="close"]') 

所以你的javascript / jquery代码（不需要改变html代码）看起来像这样：

  $(function() { $('a[class*="link"]').click(function(e){ // prevent default behaviour of anchor tag e.preventDefault(); //reset current selection (hide all divs) $('div[class*="testVid"]').hide(); // get clicked anchor tag number $this = ($(this).attr("class")).replace("link", "testVid"); // find and display div that is related to clicked a element $('.'+$this).show(); }); $('span[class*="close"]').click(function(e){ // prevent default behaviour of anchor element e.preventDefault(); //get parent element of clicked anchor element and hide it $(this).parent('div').hide(); }); }); 

在像你这样的情况下，jQuery非常有用，尤其是选择器 。

Answer 6

我已经用链接和div的常用类更新了你的小提琴 ，并且用ids更改了数字（因为它们无论如何都是唯一的）。 有了它你可以做：

 $(".showlink").click(function(e){ e.preventDefault(); $(".testVid").hide() $("#vid"+$(this).attr("id").replace("link","")).show(); });