Jquery: переключать различные ссылки / дивы и возвращать конкретную - PullRequest
Новая
       35

Jquery: переключать различные ссылки / дивы и возвращать конкретную

2 голосов
/ 09 ноября 2011

Я хочу переключать свой контент, используя разные ссылки. Если содержимое 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>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2011

Если вы собираетесь использовать 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/

0 голосов
/ 09 ноября 2011

Вместо запуска функций 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);
            }
        });
    });

});
...