Question

我想使用不同的链接切换我的内容。如果隐藏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>

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

});

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

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

2 个答案: