jQuery, меняющий местами элементы, по одному за раз

Question

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

У вас есть группа а в верхнем разделе:

<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, есть четыре раздела содержимого, один за другим, каждый из которых принадлежит каждому из a выше:

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

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

$(document).ready(function(){

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

});

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

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

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

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

Answer 1

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

  $('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

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

$("#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(); 
    });

Answer 3

Немного отличающаяся вариация идея тванфоссона.

$('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 4

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

$('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.-Как бы вы автоматизировали "таргетирование" других divs, чтобы не называть их по отдельности?массивы?

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

Answer 5

Теперь я зашел так далеко, что добавил дополнительную функциональность / касание к самому "меню якорей".Все это, с точки зрения 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 6

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

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

$('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() произведите эффект и получите его красивым и гладким...