Question

我有一个标签（bootstrap <style> body{ background-color:'gray'; } </style>）。我想通过jquery突出显示所选项目的颜色这是我的HTML

<ul>

我的问题是如何更改用户选择的项目颜色？

Answer 1

问题在于，每次导航到其他页面并且导航栏都会刷新时，它将始终选择第一个<li>作为活动状态。使用jQuery，您可以获取当前页面的URL并查看哪个链接具有此地址作为href并将活动类添加到其中。从下拉列表中的第一项中删除活动链接，并使用jQuery添加活动类。

<强>标记

<ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li id="aboutus">@Html.ActionLink("About Us", "aboutus","home")</li>
    <li id="service">@Html.ActionLink("Services", "Services", "home")</li>
    <li id="portfolio">@Html.ActionLink("Portfolio", "portfolio", "home")</li>
</ul>

<强>的jQuery

<script>
    $(document).ready(function () {
        var activeLink = location.pathname.substr(location.pathname.lastIndexOf('/'), location.pathname.length);
        var parent = $('a[href$="' + activeLink + '"]').parent('li');
        if (parent.closest('ul').hasClass('dropdown-menu')) {
            parent.parents('.dropdown').addClass('active');
        }
        parent.parent('li').addClass('active');
    });
</script>

如果导航栏的下拉列表中包含更多链接，则会使用此额外<ul>项检查。

更改所选选项卡的颜色，jquery

1 个答案: