Question

<div class="leftside-navigation">
    <ul class="sidebar-menu" id="nav-accordion">
    <li class="sub-menu">
        <a href="javascript:;">
            <i class=" fa fa-bar-chart-o"></i>
            <span>Charts</span>
        </a>
        <ul class="sub">
            <li><a href="morris.html">Morris</a></li>
            <li><a href="chartjs.html">Chartjs</a></li>
            <li><a href="sdad.sas">Flot Charts</a></li>
            <li><a href="c3_chart.html">C3 Chart</a></li>
        </ul>
    </li>
    <li class="sub-menu">
        <a href="javascript:;">
            <i class=" fa fa-bar-chart-o"></i>
            <span>Maps</span>
        </a>
        <ul class="sub">
            <li><a href="google_map.html">Google Map</a></li>
            <li><a href="test.php">Vector Map</a></li>
        </ul>
    </li>
    <li class="sub-menu">
        <a href="javascript:;">
            <i class="fa fa-glass"></i>
            <span>Extra</span>
        </a>
        <ul class="sub">
            <li><a href="blank.html">Blank Page</a></li>
            <li><a href="lock_screen.html">Lock Screen</a></li>
            <li><a href="profile.html">Profile</a></li>
            <li><a href="invoice.html">Invoice</a></li>
            <li><a href="pricing_table.html">Pricing Table</a></li>
            <li><a href="timeline.html">Timeline</a></li>                    
            <li><a href="qqw.qq">Media Gallery</a></li>
            <li><a href="404.html">404 Error</a></li>
            <li><a href="500.html">500 Error</a></li>
            <li><a href="registration.html">Registration</a></li>
        </ul>
    </li>
    <li>
        <a href="login.html">
            <i class="fa fa-user"></i>
            <span>Login Page</span>
        </a>
    </li>
</ul></div>

我有一个上面的菜单如何才能把class =＆＃34; active＆＃34;用jquery在下面的两个地方。

实施例： - 。。

<li class="sub-menu">
    <a href="javascript:;" class="active">
        <i class=" fa fa-bar-chart-o"></i>
        <span>Maps</span>
    </a>
    <ul class="sub">
        <li><a href="google_map.html">Google Map</a></li>
        <li class="active"><a href="vector_map.html">Vector Map</a></li>
    </ul>
</li>

这意味着需要添加class =＆＃34; active＆＃34;根据浏览器上的url链接在两个地方。在此示例中，网址链接为http://test.com/testproject/vector_map.html。

我尝试使用以下代码，但没有运气。

<script>
  var activeurl = window.location.pathname;
  $('#nav-accordion a[href="'+activeurl+'"] li.sub-menu a:eq(0)').addClass("active");
</script>

Answer 1

a内没有a个标签，您试图将它们添加到活动类中。它不存在，所以你可以基本使用它：

var currentUrl = window.location.href;
var subNav = $('#nav-accordion a[href="'+ currentUrl +'"]');
if ( subNav.length ) {
    subNav.addClass('active');
}

Answer 2

你可以试试这个：

var activeurl = window.location.pathname.replace(/.*\//, '');
$('#nav-accordion').find('a[href="' + activeurl + '"]').parents('ul.sub').siblings('a').addClass('active');

使用jquery将类添加到活动菜单

2 个答案: