Home
  • CMDS
  • Service Moni" />

    Переключить активный класс в навигационной панели с JQuery

    50253 просмотра

    7 ответа

    <ul>
                    <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
                    <li id="tabCMDS"  ><a href="@Href("~/CMDS")">CMDS</a></li>
                    <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
                    <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
                </ul>
    

    Поэтому я хотел привязать к clickкаждому из этих идентификаторов и установить class="active"тот, который был нажат, и удалить его из всех остальных.

    Я могу сделать первую часть, но как я могу сделать последнюю?

    Автор: slandau Источник Размещён: 12.11.2019 09:17

    Ответы (7)


    33 плюса

    Решение
    $(function() {
       $("li").click(function() {
          // remove classes from all
          $("li").removeClass("active");
          // add class to the one we clicked
          $(this).addClass("active");
       });
    });
    

    Было бы разумно дать значимые классы, <li>чтобы вы могли правильно выбрать только те, но вы поняли идею.

    Автор: Björn Размещён: 23.06.2011 07:31

    9 плюса

    Нет необходимости связывать событие клика с каждым идентификатором, а вместо этого связывать все элементы списка этого неупорядоченного списка. Затем используйте методы .parent (). Children (). Следующее должно работать:

    $('ul li').click(function(){
      $(this).addClass('active');
      $(this).parent().children('li').not(this).removeClass('active');
    });
    
    Автор: Marlin Размещён: 23.06.2011 07:39

    3 плюса

    Вы, вероятно, найдете это лучше (в противном случае страница будет прыгать) -

    $(function() {
    $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
      // stop the page from jumping to the top
      return false;
    });
    });
    
    Автор: Phil Carr Размещён: 03.09.2012 02:34

    1 плюс

    Ты можешь сделать:

    $('li').click(function(e){
        e.preventDefault();
       $(this).addClass('active');
        $(this).siblings().each(function(){
            $(this).removeClass('active') ;
    
        });
    });
    

    скрипка здесь http://jsfiddle.net/UVyKe/1/

    Автор: Nicola Peluchetti Размещён: 23.06.2011 07:35

    0 плюса

    Дайте ul идентификатор или класс и выберите его.

    <ul id = "nav">...
    
    var $navItems = $('#nav > li');
    $navItems.click(function(){
        $navItems.removeClass('active');
        $(this).addClass('active');
    });
    
    Автор: Stefan Kendall Размещён: 23.06.2011 07:30

    0 плюса

    $("ul li").click(function()
    {
    $("ul .active").removeClass("active");
    $(this).addClass("active");
    });
    
    Автор: Itai Sagi Размещён: 23.06.2011 07:34

    -1 плюса

    Вы можете добавить активный класс, используя одну строку ниже, без каких-либо событий

    $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
    

    ссылка для ссылки

    Автор: Manthan Vaghani Размещён: 10.02.2018 11:09
    Вопросы из категории :
    32x32