it-roy-ru.com

Как изменить активный класс при переходе по другой ссылке в начальной загрузке с помощью jquery?

У меня есть HTML в качестве боковой панели, и я использую Bootstrap.

<ul class="nav nav-list">
    <li class="active"><a href="/">Link 1</a></li>
    <li><a href="/link2">Link 2</a></li>
    <li><a href="/link3">Link 3</a></li>
</ul>

Я хочу сделать кое-что:

Когда я click ссылка, такая как ссылка 3, page content изменится на содержимое ссылки 3, а ссылка 3 будет иметь класс active, и удалит активный clss в ссылке 1.

Я думаю, что это может быть реализовано в jQuery, и я искал много вопросов в SO, таких как:

Я использую этот скрипт:

$(document).ready(function () {
    $('.nav li').click(function(e) {

        $('.nav li').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        //e.preventDefault();
    });
});

Но большинство из них используют preventDefault, это предотвратит продолжение действий. Так что это не может измениться на содержание страницы ссылки 3.

Если я удаляю оператор protectDefault, когда страница загружает содержимое ссылки 3, активный класс возвращается к ссылке 1.

Так есть ли способ решить эту проблему?

7
Tanky Woo

Вы связываете, нажимаете не на тот элемент, вы должны связать его с a.

Вы предотвращаете возникновение события по умолчанию в li, но li не имеет поведения по умолчанию, a имеет.

Попробуй это:

$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});
24
Karl-André Gagnon

Я использую начальную навигацию

Это сделало работу для меня, включая активные основные выпадающие и активные дети

$(document).ready(function () {
        var url = window.location;
    // Will only work if string in href matches with location
        $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
        $('ul.nav a').filter(function () {
            return this.href == url;
        }).parent().addClass('active').parent().parent().addClass('active');
    });
5
Fazil Khan

Если вы измените классы и загрузите содержимое в пределах одной и той же функции, все будет в порядке.

$(document).ready(function(){
    $('.nav li').click(function(event){
        //remove all pre-existing active classes
        $('.active').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');

        //Load the content
        //e.g.
        //load the page that the link was pointing to
        //$('#content').load($(this).find(a).attr('href'));      

        event.preventDefault();
    });
});
2
Daniel Apt
<script type="text/javascript">
$(document).ready(function(){
    $('.nav li').click(function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');

    });

});

1
Milan

У меня была такая же проблема, прежде чем . Попробуйте этот ответ здесь, он работает на моем сайте.

$(function(){
  var current_page_URL = location.href;
  $( "a" ).each(function() {
     if ($(this).attr("href") !== "#") {
       var target_URL = $(this).prop("href");
       if (target_URL == current_page_URL) {
          $('nav a').parents('li, ul').removeClass('active');
          $(this).parent('li').addClass('active');
          return false;
       }
     }
  });
});

Источник: Это было оригинально размещено здесь как установить активный класс в меню навигации из начальной загрузки Twitter

0
hsusyh

Если вы используете серверный код, такой как Java, вам нужно вернуть имя активной вкладки, и на странице возврата есть функция отключения (то есть удаления активного класса) всех вкладок, кроме той, которую вы вернули. 

Для этого потребуется добавить идентификатор или имя для каждой вкладки. Еще немного работы :)

0
user2770401
$(".nav li").click(function() {
    if ($(".nav li").removeClass("active")) {
        $(this).removeClass("active");
    }
    $(this).addClass("active");
});

Это то, что я придумал . Он проверяет, имеет ли элемент "li" класс active, если он не пропускает часть удаления класса .. Я немного опоздал на вечеринку, но надеюсь, что это поможет. :)

0
Didiencho

Вы можете использовать куки для сохранения данных обратной передачи с одной страницы на другую. Потратив много времени, наконец, я смог это сделать. Я предлагаю свой ответ вам (это полностью работает, так как мне это тоже нужно).

сначала присвойте тегу li правильное имя, например

<ul class="nav nav-list">
    <li id="tab1" class="active"><a href="/">Link 1</a></li>
    <li id="tab2"><a href="/link2">Link 2</a></li>
    <li id="tab3"><a href="/link3">Link 3</a></li>
</ul>

После этого скопируйте и вставьте этот скрипт ........ так как я написал некоторый JavaScript для чтения, удаления и создания файлов cookie.

 $('.nav li a').click(function (e) {
  
        var $parent = $(this).parent();
        document.cookie = eraseCookie("tab");
        document.cookie = createCookie("tab", $parent.attr('id'),0);
 });

    $().ready(function () {
        var $activeTab = readCookie("tab");
        if (!$activeTab =="") {
        $('#tab1').removeClass('ActiveTab');
          }
       // alert($activeTab.toString());
       
        $('#'+$activeTab).addClass('active');
    });

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Примечание: убедитесь, что вы поставили в соответствии с вашими требованиями. Я написал этот скрипт в соответствии с моей реализацией, и он прекрасно работает для меня.

0
Rajput