Question

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

以下是我的观点：

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

Answer 1

你可以尝试将url路径与jQuery匹配并添加＆＃34; active＆＃34;用它来上课：

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

使侧边栏导航标签处于活动状态？

1 个答案: