Блог

Главная - Вопросы по программированию - Jquery: переключать разные ссылки / разделы и возвращать определенный

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

#jquery #hide #toggle #hyperlink #show

#jquery #скрыть #переключать #гиперссылка #показать

Вопрос:

Я хочу переключать свой контент, используя разные ссылки. Если содержимое div2 thru div5 скрыто, оно должно переключиться обратно на div1 .

При загрузке страницы отображается содержимое newboxes1 . Если я нажимаю на ссылки over2 через over5 , содержимое должно переключаться между ними. Если содержимое newboxs2 thru 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>

Ответ №1:

Вместо того, чтобы запускать функции JavaScript в качестве HREFS для якорей, прикрепите .click событие к каждому из них в вашем скрипте и используйте data- атрибуты, чтобы указать, какими разделениями вы хотите манипулировать.

Попробуйте это: 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 /