CODEWITHSUNDEEP
javascriptjqueryhtmlweb
OsquiB
OsquiB

Reputation: 59

class active not work with jquery

I am since yesterday looking like fixing this error. I found several posts on the website but none worked me. I have this code html:

<nav class="nav-main mega-menu">
<ul class="nav nav-pills nav-main" id="mainMenu">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="page-services.html">
            item4
            <i class="icon icon-angle-down"></i>
        </a>
        <ul class="dropdown-menu">
            <li><a href="">item5</a></li>
            <li><a href="">item6</a></li>
            <li><a href="">item7</a></li>
            <li><a href="">item8</a></li>
            <li><a href="">item9</a></li>
        </ul>
    </li>
    <li><a href="">item10</a></li>
    <li><a href="">item11</a></li>
    <li><a href="">item12</a></li>
</ul>
</nav>

and in the i have this code js:

<script type="javascript">
   $('.nav-pills').on('click', 'li', function() {
   $('.nav-pills li.active').removeClass('active');
   $(this).addClass('active');
   });
</script>

also try this:

<script type="javascript">
   $('.nav-main').on('click', 'li', function() {
   $('.nav-main li.active').removeClass('active');
   $(this).addClass('active');
   });
</script>

but does not work. Can someone help me? I tried a lot of options I found on the site but this not works

Upvotes: 0

Views: 2144

Answers (2)

blazerunner44
blazerunner44

Reputation: 657

Try putting this around your code:

$(document).ready(function(){

//your code here

});

Upvotes: 1

Cl&#233;ment Pr&#233;vost
Cl&#233;ment Pr&#233;vost

Reputation: 8640

Try this version: http://jsfiddle.net/2y2r2wmm/3/

$('.nav-pills').on('click', 'li', function() {
  $('.nav-pills li.active').removeClass('active');
  $(this).addClass('active');
  return false;
});

Upvotes: 0

Related Questions