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，即使它们不一定是可见的，也会删除其他链接上的活动类，即使它们未被应用（以确保它们被删除）然后显示相应的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/

Jquery如何激活div显示/隐藏

3 个答案: