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

Ответ 1

Вы привязываете вас к клику на неправильном элементе, вы должны привязать его к 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();
    });
});

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

    });

});

Ответ 6

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

Это потребует, чтобы вы добавляли идентификатор или имя на каждую вкладку. Немного больше работы:)

Ответ 7

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

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

Ответ 8

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

сначала дайте тегу 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>

Ответ 9

Это сделает свое дело

 $(document).ready(function () {
        var url = window.location;
        var element = $('ul.nav a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0;
        }).addClass('active').parent().parent().addClass('in').parent();
        if (element.is('li')) {
            element.addClass('active');
        }
    });

Ответ 10

HTML-код в моем случае

<ul class="navs">
   <li  id="tab1"><a href="index-2.html">home</a></li>
   <li id="tab2"><a href="about.html">about</a></li>

   <li id="tab3"><a href="project-02.html">Products</a></li>

   <li id="tab4"><a href="contact.html">contact</a></li>
 </ul>

и код JS

  $('.navs 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);
}