Как добавить класс (активный) на конкретный "ли" на клик пользователя с помощью jQuery

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

 <ul class="nav">
                        <li class="dropdown active">
                            <asp:HyperLink ID="hlHome" runat="server" href="Default.aspx">Home</asp:HyperLink>
                        </li>
                        <li class="dropdown">
                            <asp:HyperLink runat="Server" cssClass="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                                Register
                                <i class="icon-angle-down"></i>
                            </asp:HyperLink>
                            <ul class="dropdown-menu">
                                <li><asp:HyperLink runat="server" ID="hlCreateAccount" href="register.aspx">Create Account</asp:HyperLink></li>
                                <li><asp:HyperLink runat="Server" href="forgot.aspx" ID="hlForgot">Forgot Credentials ?</asp:HyperLink></li>
                                <li><asp:HyperLink runat="server" href="blocked.aspx" ID="hlBlockedAccount">Blocked Account</asp:HyperLink></li>
                                <li><asp:HyperLink ID="hlUnblockAccount" href="unblock.aspx" runat="server">Unblock Account</asp:HyperLink></li>
                            </ul>
                        </li>
                        <li><asp:HyperLink  ID="hlBug" runat="server" href="bug.aspx">Report A Bug</asp:HyperLink></li>
                        <li><asp:HyperLink ID="hlContact" runat="server" href="contact.aspx">Contact Us</asp:HyperLink></li>
                    </ul>

И я пробовал следующий код с jQuery:

<script type="text/javascript">
     function pageLoad() {
         var loc = window.location.href.split('/');
         var page = loc[loc.length - 1];
         $('ul.nav a').each(function (i) {
             var href = $(this).attr('href');
             if (href.indexOf(page) !== -1) {
                 $('ul.nav li.active').removeClass('active');
                 $(this).parent().addClass('active');
             }
         });
     }

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

Ответ 1

Вы указали как jQuery, так и Javascript в тегах, поэтому оба подхода.

JQuery

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

Fiddle: http://jsfiddle.net/bvf9u/

Чистый Javascript:

var selector, elems, makeActive;

selector = '.nav li';

elems = document.querySelectorAll(selector);

makeActive = function () {
    for (var i = 0; i < elems.length; i++)
        elems[i].classList.remove('active');

    this.classList.add('active');
};

for (var i = 0; i < elems.length; i++)
    elems[i].addEventListener('mousedown', makeActive);

Fiddle: http://jsfiddle.net/rn3nc/1

jQuery с делегированием событий:

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

$('.nav').on('click', 'li', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
});

Fiddle: http://jsfiddle.net/bvf9u/1/

Тонкая разница заключается в том, что обработчик привязан к .nav сейчас, поэтому, когда вы нажимаете li, событие выдает пузырьки DOM в .nav, который вызывает обработчик, если элемент, нажавший, соответствует вашему selector аргумент. Это означает, что новым элементам не нужен новый обработчик, связанный с ними, поскольку он уже привязан к предку.

Это действительно интересно. Подробнее об этом читайте здесь: http://api.jquery.com/on/

Ответ 2

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

        $('.dates li a').removeClass('active');

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

Ответ 3

//Напишите метод javascript для привязки события click для каждого элемента "li"

    function BindClickEvent()
    {
    var selector = '.nav li';
    //Removes click event of each li
    $(selector ).unbind('click');
    //Add click event
    $(selector ).bind('click', function()
    {
        $(selector).removeClass('active');
        $(this).addClass('active');
    });

    }

//сначала вызовите этот метод, когда первый раз при загрузке страницы

    $( document ).ready(function() {
         BindClickEvent();
    });

//Вызов метода BindClickEvent со стороны сервера

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(Page,GetType(), Guid.NewGuid().ToString(),"BindClickEvent();",true);
    }

Ответ 4

Немного отключив тему, но придя сюда при разработке приложения Angular2, я хотел бы поделиться тем, что Angular2 автоматически добавляет класс "router-link-active" к активным ссылкам маршрутизатора, таким как этот:

<li><a [routerLink]="['Dashboard']">Dashboard</a></li>

Таким образом, вы можете легко создавать такие ссылки с помощью CSS:

.router-link-active {
    color: red;
}

Ответ 5

        // Remove active for all items.
        $('.sidebar-menu li').removeClass('active');
        // highlight submenu item
        $('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
        // Highlight parent menu item.
        $('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active')