使用jQuery將類添加到活動菜單

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>

我有一個像上面的菜單，如何使用jquery將class =“ active”放在下面的兩個地方。

示例：-。 。 。

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

這意味着需要根據瀏覽器上的url鏈接在兩個位置添加class =“ active”。 在此示例中，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');