Jquery：切换不同的链接/ div并返回一个特定的答案

【问题标题】：Jquery: Toggle different links/divs and return a specific oneJquery：切换不同的链接/ div并返回一个特定的
【发布时间】：2011-12-25 09:00:50
【问题描述】：

我想使用不同的链接切换我的内容。如果div2 到div5 的内容被隐藏，则必须切换回div1。

在加载页面时会显示newboxes1 的内容。如果我点击链接over2 到over5，内容必须在它们之间切换。如果newboxs2 到newbox5 的内容被隐藏，脚本会自动返回到newbox1。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
           function showonlyone(thechosenone) {  

     $('div[name|="newboxes"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).toggle(200);

          }
          else {
               $(this).hide(600);


               if ($(this).css('display') == 'none') {


                    $('#newboxes1').show();     

               }

               else {


               }

          }


     });
}




    </script> 

    <style>

    #newboxes1{
        border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;

    }

    #newboxes2{
        border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;

    }

    #newboxes3{
        border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;

    }

    #newboxes4{
        border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;

    }

    #newboxes5{
        border: 1px solid black; background-color: #CCCCCC;padding: 5px; width: 150px;

    }

    .hidden{
        display:none;
    }
    .shown{
        display:block;
    }

    </style>


</head>
<body>


         <div >
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >Home</a>

         </div>


         <div name="newboxes" id="newboxes1" class="shown">Div #1</div>

         <div name="newboxes" id="newboxes2" class="hidden">Div #2</div>


         <div name="newboxes" id="newboxes3" class="hidden">Div #3</div>

         <div name="newboxes" id="newboxes4" class="hidden">Div #4</div>

         <div name="newboxes" id="newboxes5" class="hidden">Div #5</div>

        <div>
        <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >over 1</a>
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >over 2</a>
            <a id="myHeader4" href="javascript:showonlyone('newboxes4');" >over 3</a>
            <a id="myHeader5" href="javascript:showonlyone('newboxes5');" >over 4</a>
        </div>


</body>
</html>

【问题讨论】：

标签： jquery hide toggle hyperlink show

【解决方案1】：

不要将 JavaScript 函数作为锚点的 HREF 运行，而是将 .click 事件附加到脚本中的每个事件，并使用 data- 属性来指示要操作的 DIV。

试试这个：http://jsfiddle.net/mblase75/H5cN2/1/

HTML：

<div>
   <a id="myHeader1" href="javascript:" data-hide="newboxes1" >Home</a>
</div>

<div name="newboxes" id="newboxes1" class="shown">Div #1</div>
<div name="newboxes" id="newboxes2" class="hidden">Div #2</div>
<div name="newboxes" id="newboxes3" class="hidden">Div #3</div>
<div name="newboxes" id="newboxes4" class="hidden">Div #4</div>
<div name="newboxes" id="newboxes5" class="hidden">Div #5</div>

<div>
    <a id="myHeader2" href="javascript:"  data-hide="newboxes2">over 1</a>
    <a id="myHeader3" href="javascript:"  data-hide="newboxes3">over 2</a>
    <a id="myHeader4" href="javascript:"  data-hide="newboxes4">over 3</a>
    <a id="myHeader5" href="javascript:"  data-hide="newboxes5">over 4</a>
</div>

JS：

$(document).ready(function() {

    $('a[id^="myHeader"]').click(function() {
        $div = $('div#' + $(this).data('hide')); 
        $div.siblings('[name^="newboxes"]').hide(200).end().toggle(200, function() {
            if (!$div.is(':visible')) {
                $('#newboxes1').toggle(200);
            }
        });
    });

});

【讨论】：

【解决方案2】：

如果您打算利用 jQuery 来处理您的行为，则无需在标记中使用 href="javascript:blah()"。

首先，你应该对你的链接进行分类，因为它们提供了一种行为——这使得在 jQuery 中选择它们变得很容易，并且让你可以灵活地对链接应用独特的样式，以便它们不同于一个“正常”的链接。

此外，您可以简单地使用“书签语法”，而不是使用函数参数来识别要切换的<div>。这将被 jQuery 用来选择正确的<div> 来显示。

按照上述内容，您的标记应如下所示：

<div>
    <a id="myHeader1" class="toggler" href="#newboxes1" >Home</a>
</div>
<div name="newboxes" id="newboxes1" class="shown">Div #1</div>
<div name="newboxes" id="newboxes2" class="hidden">Div #2</div>
<div name="newboxes" id="newboxes3" class="hidden">Div #3</div>
<div name="newboxes" id="newboxes4" class="hidden">Div #4</div>
<div name="newboxes" id="newboxes5" class="hidden">Div #5</div>
<div>
    <a id="myHeader2" class="toggler" href="#newboxes2" >over 1</a>
    <a id="myHeader3" class="toggler" href="#newboxes3" >over 2</a>
    <a id="myHeader4" class="toggler" href="#newboxes4" >over 3</a>
    <a id="myHeader5" class="toggler" href="#newboxes5" >over 4</a>
</div>

接下来，只需将click() 事件挂钩到锚点并将显示/隐藏逻辑放入其中：

$('.toggler').click(function() {

    var divToToggle = $(this).attr('href');    // Extract the ID of the div

    $('div[name="newboxes"]').each(function() {
        // Hide all divs except the one we want to toggle
        if ($(this).attr('id') !== divToToggle.replace(/#/, '')) {
            $(this).hide(600);
        }
    });

    // Toggle the selected div, and use a callback to show the
    // "home" div if all others are hidden
    $(divToToggle).toggle(200, function() {
        if ($('div[name="newboxes"]:visible').length === 0) {
            $('#newboxes1').toggle(200);
        }
    });

});

工作演示：http://jsfiddle.net/JysG2/

【讨论】：