jquery如何激活div显示/隐藏

Question

我对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，甚至如果它们不一定是可见的，并且还移除其他链接上的活动类，即使它们未被应用（以确保它们被移除），然后显示对应g div，并将活动类添加到链接。我想知道是否有一种更简单的方法来创建此功能，而不必隐藏所有其他div并删除所有活动的类以确保除了我想要看到的那个之外什么都显示。

非常感谢您提供的任何帮助！

Answer 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(); 
}); 

See a demo here的代码还对演示解释（注释）

Answer 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');   

}); 

现在你并不需要所有这些不同的ID和类，并减少代码重复在你的HTML。 :)

的jsfiddle：http://jsfiddle.net/divad12/mMSGf/2/

Answer 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> 

富勒更多的例子，请参考链接：

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/