jQuery добавляет класс в div, удаляя его из других

#jquery #css

Вопрос:

Здравствуйте, я пытаюсь создать навигацию, созданную из DIV, которая использует функцию jQuery AJAX для загрузки страниц.

Я хочу, чтобы, когда пользователь нажимает, скажем, на Pages, тогда на Dashboard или на любой другой активной странице, на которой они находятся, класс с именем active удалялся и добавлялся к новой выбранной

 <div class="dijit active" id="dijit_dashboard">Dashboard</div> 
<div class="dijit" id="dijit_pages">Pages</div>

Код jQuery, который не совсем выполняет работу.

 $("#dijit_pages").click(function() { 
    $("#dijit_utm").load('index.html'); 
    $(this).addClass("active");
});

но я не уверен, как удалить класс active из всех остальных.

Ответ №1:

 $(function() {
    $(".dijit").live("click", function() {
        $(".dijit").removeClass("active");  // remove active class from all
        $(this).addClass("active");         // add active class to clicked element
        $("#dijit_utm").load('index.html'); 
    });
});

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

 <div class="dijit active" id="dijit_dashboard"><a href="dashboard.html">Dashboard</a></div> 
<div class="dijit" id="dijit_pages"><a href="pages.html">Pages</a></div>

 $(function() {
    $(".dijit").live("click", function(e) {
        e.preventDefault();
        $(".dijit").removeClass("active");  // remove active class from all
        $(this).addClass("active");         // add active class to clicked element
        var href = $(this).find("A").attr("href");
        $("#dijit_utm").load(href);
    });
});

Обновить

Этот старый ответ, похоже, по-прежнему получает довольно устойчивые представления, поэтому вот обновленный ответ с использованием новейших методов jQuery, поскольку live() он устарел с версии 1.7:

 $(document).on('click', '.dijit', function(e) {
    e.preventDefault();
    var $el = $(this);
    $el.addClass("active").siblings().removeClass('active');
    $("#dijit_utm").load($el.find('a').attr('href'));
});

1. Я использую обновленный ответ на моем сайте WordPress, чтобы запустить некоторые анимации CSS. Однако, что мне нужно добавить к этому коду, чтобы иметь возможность щелкнуть по активному div и удалить класс из него?

2. Возможно $(document).on('click', '.active', e => $(e.target).removeClass('active')); , но это всего лишь предположение, не видя вашего кода. Если у вас возникли проблемы, я бы предложил начать свой собственный вопрос, включая весь соответствующий код.

3. Спасибо, Рори, я опубликовал новый вопрос с моим кодом, так что, надеюсь, это простой ответ!

4. Это было! Просто измените addClass на toggleClass, с этим следовало разобраться раньше!

Ответ №2:

Я добавил строку в ваш код, которая находит все DIV элементы с active классом и удаляет этот класс:

 $( '#dijit_pages' ).click( function()
{
  $( '#dijit_utm' ).load( 'index.html' );
  $( 'div.active' ).removeClass( 'active' );
  $( this ).addClass( 'active' );
} );

Однако для ваших целей он может быть слишком широким, если вы используете активный класс не в вашем меню, а в других местах. Если это так, вы хотите сузить область поиска элементов с классом active при выборе.

Редактировать: С добавленной вами разметкой я бы изменил на это:

 $( function()
{
  var $dijitMenuItems = $( '.digit' ),
      activeClass = 'active';

  $dijitMenuItems.click( function( e )
  {
    $( '#dijit_utm' ).load( 'index.html' ); //will need more info to determine how to find href to load
    $dijitMenuItems.removeClass( activeClass );
    $( this ).addClass( activeClass );

    e.preventDefault(); //most likely needed to stop any link-following from within the DIV
  } );
} );