CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ajay
Ajay

Reputation: 189

add class to active menu with jquery

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

I have a menu like above How can I put class="active" in two place like below with jquery.

Example:- . . .

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

That means need to add class="active" in two place according to the url link on browser. in this example the url link is http://test.com/testproject/vector_map.html.

I have tried with below code but no luck.

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

Upvotes: 0

Views: 984

Answers (2)

Ferret
Ferret

Reputation: 1440

You could try this:

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

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

There is no a tags inside a which your are trying to add them active class. It doesn't exists so you can basicly use this:

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

Upvotes: 1

Related Questions