jQuery的激活DIV显示/隐藏

jQuery的激活DIV显示/隐藏

 

javascript jquery
我是相当新的jQuery和JavaScript的，并很努力，我相信有一个更简单的方法来的函数的项目。下面是我做的一个简化版本： HTML

<a class="link1" href="#">Link 1</a>
<a class="link2" href="#">Link 2</a>
<a class="link3" href="#">Link 3</a>
<div id="div1" style="display: hidden;">Content</div>
<div id="div2" style="display: hidden;">Content</div>
<div id="div3" style="display: hidden;">Content</div>

jQuery的

$(".link1").click(function(){
 $("#div2, #div3").hide();
 $("#div1").show();
 $(".link2, .link3").removeClass("active");
$(".link1").addClass("active");
});
$(".link2").click(function(){
 $("#div1, #div3").hide();
 $("#div2").show();
 $(".link1, .link3").removeClass("active");
$(".link2").addClass("active");
});
$(".link3").click(function(){
 $("#div1, #div2").hide();
 $("#div3").show();
 $(".link1, .link2").removeClass("active");
$(".link3").addClass("active");
});

所以基本上每一个环节是隐藏了非对应的div，即使他们不一定明显，也消除了对即使他们不适用（以确保它们被删除）其他环节的活动类，然后显示相应的div，并增加了有源类的链接。我想知道如果有一个更简单的方法来创建这个函数 CodeGo.net，而不必隐藏所有其他的div并删除所有活动类，以确保只不过是一个我想看到的显示。 非常感谢您的帮助，您可以提供！
本文地址 ：CodeGo.net/6839803/ 
------------------------------------------------------------------------------------------------------------------------- 
1. 你可以改变你的HTML一点，使事情变得更容易，例如：

<a class="link" href="#" rel="div1">Link 1</a>
<a class="link" href="#" rel="div2">Link 2</a>
<a class="link" href="#" rel="div3">Link 3</a>
<div class="content" id="div1">Content 1</div>
<div class="content" id="div2">Content 2</div>
<div class="content" id="div3">Content 3</div>

和一个简单的函数来执行我的想法，你想要的：

$('.link').click(function(e){
 e.preventDefault();
 var content = $(this).attr('rel');
 $('.active').removeClass('active');
 $(this).addClass('active');
 $('.content').hide();
 $('#'+content).show();
});

看到这里演示的代码还解释（上演示

2.
如果你组你喜欢
<div id="links">
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
</div>
<div id="content">
 <div>Content</div>
 <div>Content</div>
 <div>Content</div>
</div>
 并添加CSS
#content div {
 display: none;
}
 然后，你可以做
$('#links').children().click(function() {
 // Get the index of the link that was clicked on
 var index = $('#links').children().index(this);
 // Hide all content except that corresponding to the clicked link
 $('#content').children().hide().eq(index).show();    
 // Remove active class from all links except that which was clicked  
 $('#links').children().removeClass('active');
 $(this).addClass('active');  
});

现在你不需要在你的HTML中，所有这些不同的ID和类，以及更少的代码重复。 :)
 JSFiddle：

3.
试试下面的例子。请做必要的更改。
Jquery:
function showonlyone(thechosenone) {
  $('div[name|="newboxes"]').each(function(index) {
   if ($(this).attr("id") == thechosenone) {
    $(this).show(200);
   }
   else {
    $(this).hide(600);
   }
  });
}
 HTML：
<table>
 <tr>
  <td>
   <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
   <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
   </div>
   <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
  </td>
  <td>
   <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
   <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
   </div>
   <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
  </td>
  <td>
   <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
   <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
   </div>
   <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
  </td>
 </tr>
</table>