使侧边栏导航选项卡处于活动状态？答案

【问题标题】：Making sidebar-nav tabs active?使侧边栏导航选项卡处于活动状态？
【发布时间】：2015-11-26 11:18:00
【问题描述】：

我有一个带有多个标签的侧边栏导航。如何使用户查看的当前选项卡处于活动状态/突出显示？我尝试了活动课程，但它似乎使一个标签不断地处于活动状态！任何帮助将不胜感激

这是我的看法：

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="/ci/index.php/adel_ctl/member"> KU Faculty</a>
            </li>
            <li>
                <hr style='margin-top:2px; color:#000;margin-right:30px;'>
            </li>
            <li>
                <a href="/ci/index.php/adel_ctl/profile/<?=$id?>">My Profile</a>
            </li>
            <li>
                <a href="/ci/index.php/adel_ctl/research/<?=$id?>">Reseasrch</a>
            </li>
            <li>
                <a href="/ci/index.php/adel_ctl/teaching/<?=$id?>">Teaching</a></li>
            </li>
            <li>
                <a href="/ci/index.php/adel_ctl/experience/<?=$id?>">Experience</a></li>
            </li>
            <li>
                <a href="/ci/index.php/adel_ctl/publications/<?=$id?>">Publications</a>
            </li>
            <li>
                <a href="/ci/index.php/adel_ctl/resume/<?=$id?>">Resume</a>
            </li>
            <li>
                <a href="/ci/index.php/adel_ctl/about/<?=$id?>">About us</a>
            </li>
        </ul>
    </div>

【问题讨论】：

标签： html css tabs sidebar

【解决方案1】：

您可以尝试将 url 路径与 jQuery 匹配并添加“活动”类：

$(function(){
    var this_url = window.location.pathname;
    var list_sidebar_link = $(".sidebar-nav li a");
    $(list_sidebar_link).each(function (i, item) {
        var the_a = list_sidebar_link[i];
        if (this_url == $(the_a).attr('href')) {
            $(the_a).addClass('active');
        }
    });
});

【讨论】：

感谢您的帮助，但请您再解释一下，因为我从未使用过 jQuery/js。你提供的代码，我应该在哪里添加？？
JQuery 是一个 JavaScript 库，它通过使用 HTML 选择器来帮助编写更少的代码。它还有很多，但在这种情况下，它的解释就更多了。 jquery.com 您可以通过将 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 添加到部分或在结束正文标记上方将其添加到您的页面。之后将代码 sn-p 放在
好的，我这样做了：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>‌ <script $(function(){ var path = $('.sidebar-nav li').find('a').attr('href'); if (path === window.location.pathname) { $(this).addClass('active'); } });> </script>，但当前标签仍然没有激活
你有 .active 类的 CSS 吗？
是的，.active { color: #000;}