JQuery Перестановка Toggle элементов, по одному за раз

Question

Я новичок в JQuery, и я хотел бы знать, есть ли у вас какие-либо идеи относительно того, как выполнить следующее с JQuery вместо JScript:

У вас есть группа в верхнем div:

<h3>
<a id="acer" href="#acerca">acerca</a> |
<a id="cur" href="#cursos">cursos y clases</a> |
<a id="cal" href="#calendario">calendario</a> |
<a id="con" href="#contacto">contacto</a>
</h3>

И под ними, внутри того же контейнера div, есть четыре содержимого div, один за другим, каждый из которых принадлежит каждому из элементов выше:

<div id="acerca"></div>
<div id="cursos"></div>
<div id="calendario"></div>
<div id="contacto"></div>

Теперь идея заключается в том, что мы начинаем с закрытия всех этих div содержимого, кроме одного, первого: acerca, который виден пользователю:

$(document).ready(function(){

    $("#cursos,#calendario,#contacto").hide();

});

Теперь, используя h3 a вверху, я хочу, чтобы произошло следующее поведение:

1.- Если я щелкну другой элемент, отличный от открытого по умолчанию (acerca), то закрою открытый в данный момент и покажу новый. 2.- Если я щелкну по тому же элементу, который уже открыт (acerca), то ничего не произойдет: всегда должен быть открыт один div для контента. 3.- Если возможно, используйте #anchors для маскировки уродливого "javascript:;" старых дней.

Это очень просто с использованием функции JavaScript onclick (за исключением #3), но я как-то застреваю с JQuery.

Помощь очень ценится Соткра

Answer 1

Я бы назначил общий класс всем DIV, чтобы я мог ссылаться на них коллективно. Когда выбран один из якорей, я удаляю все "выбранные" классы из всех DIV, а затем применяю "выбранный" класс к DIV, который должен отображаться. Затем я скрыл бы все DIV, у которых нет выбранного класса, и показал бы DIV, у которого есть выбранный класс. Таким образом, если вы щелкнете по той же ссылке, у вас не будет мигать, как если бы вы просто спрятали все DIV, а затем отобразили выбранную.

  $('a').click( function() {
      var all = $('div.interface');
      var selected = $(this).attr('href');
      all.removeClass('selected');
      $(selected).addClass('selected');
      div.filter(':not(.selected)').hide();
      div.filter('.selected').show();
      return false;  // stop the link from being taken
 }); 

Answer 2

Немного другой вариант идеи tvanfosson.

$('a').click(
    function()
    {
        var selected = $(this).attr('href');
        //If user clicked on a link which is already displayed, do nothing.
        if($(selected).hasClass('selected'))
            return;

        //hide all the divs.
        $('div.interface')
            .hide()
            .removeClass('selected');

        //show the selected div.
        $(selected)
            .show()
            .addClass('selected');
   }
}

Answer 3

Теперь я зашел так далеко, что добавил дополнительную функциональность / прикосновение к самому "меню якорей". Все это, с точки зрения JQuery, выглядит следующим образом. Не берите в голову глупые имена переменных, используемые в примере =):

$(document).ready(function(){

$("#cursos,#calendario,#contacto").hide();
$("#ace").addClass('check');


$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');
        var anchorer = $(this);

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca,#cursos,#calendario,#contacto").hide();
        $(checker).show();
        $("#ace,#cur,#cal,#con").removeClass('check');
        $(anchorer).addClass('check');

        return false;  // 


            }
   });


});

Answer 4

Отличные ответы, ребята!

Я сделал некоторые корректировки, чтобы получить некоторую анимацию при переключении div -ов... Я использовал эффект слайда, но он должен работать с любой анимацией.

$('a').click( function() {
    var all = $('div.interfase');
    var selected = $(this).attr('href');
    if($(selected).hasClass('selected') || $(selected).is(":visible"))
        return false;
    else
    {
        all.removeClass('selected');
        $(selected).addClass('selected');
        $('div.interfase:visible').filter(':not(.selected)').hide('slide',
        function() {
        all.filter('.selected').show('slide');
        });
        return false;
    }
});

Примечание: этот код работает, только если у вас есть ранее выбранный и видимый div, потому что я использую функцию обратного вызова внутри hide() активировать show() эффект и получить это красиво и гладко...

Answer 5

После того, как я черпал вдохновение из ваших предложений, я придумал следующее:

$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca").hide();
        $("#cursos").hide();
        $("#calendario").hide();
        $("#contacto").hide();
        $(checker).show();

        return false;


            }
   });

В этом случае:

1.-Как бы вы автоматизировали "таргетинг" других дивов, чтобы не называть их по отдельности? массивы?

В любом случае, спасибо, я буду продолжать над этим работать.

Answer 6

Самое простое решение - добавить вручную события для каждого элемента меню, а затем скрыть или показать с помощью "переключателя", с помощью которого вы можете добавить те же эффекты, что и с show hidde.

$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

Другое решение, в этом случае вы можете добавлять пункты меню, не изменяя код jquery, с обязательным условием, чтобы текст привязки был идентификатором div.

<a href="#acerca" class="anchorClass">acercade</a>
<div id="acercade"></div>

    $(".anchorClass").click(function(){ 
            $("#"+$(this).text()).toggle(); 
    });