CODEWITHSUNDEEP
jqueryhyperlink
krubkiewicz
krubkiewicz

Reputation: 105

Highlight active menu item using jquery

I am having troubles highlighting my active menu items. I am using CSS for hover but what I understand from other posts is that a:active doesn't work with CSS?

This is what I have so done so far:

HTML

 <section id="nav">    
        <li><a class="nav" href="editorial.html">EDITORIAL</a></li>
        <li><a class="nav" href="places.html">PLACES</a></li>
        <li><a class="nav" href="people.html">PEOPLE</a></li>
        <li><a class="nav" href="architecture.html">ARCHITECTURE</a></li>
        <li><a class="nav" href="projects.html">PROJECTS</a></li>
        <li><a class="nav" href="published.html">PUBLISHED</a></li>
</section>

CSS

#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}

#nav li{
display:inline;
}

#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}

#nav .nav:hover{
background:#FFFF00;
color:#000;
}

.active{
background:#FFFF00;
color:#000;
}

JQUERY

  <script>
 $(document).ready(function() { 
  $("#nav li .nav").click(function ( e ) {
e.preventDefault();
$("#nav li a.active").removeClass("active"); //Remove any "active" class  
$(this).addClass("active"); //Add "active" class to selected tab  

// $(activeTab).show(); //Fade in the active content  
});
});

Thanks in advance!

Upvotes: 5

Views: 39155

Answers (7)

Ashok Sen
Ashok Sen

Reputation: 183

<script>
  $(document).ready(function(){
      var url = document.location.href;

      $('.navbar-nav li').removeClass('active');
      $('.navbar-nav li a').filter(function(){ 
          return this.href == url;
      }).parent().addClass('active');
  });
</script>

Try this. It worked well.

Upvotes: 0

Kabir Hossain
Kabir Hossain

Reputation: 3105

I faced this problem. I solve this as. 

<script>
  $(window).load(function(){
      var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
          return this.href == url;
      }).parent().addClass('active');
  });
</script>

You can save jsfiddle demo to local and you can test.

Upvotes: 4

Jiř&#237; Zapletal
Jiř&#237; Zapletal

Reputation: 23

Take text from #page-indicator and set class active to <li><a href="#">text</a></li>.

<!-- Bootstrap 3.3.6 part of navigation -->
<ul class="nav navbar-nav">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
    <li><a href="#">Fifth</a></li>
    <li><a href="#">Sixth</a></li>
</ul>

<!-- Page name indicator -->
<span id="page-indicator" class="hidden"><?= $pageName = 'Third' ?></span>

<!-- jQuery 1.11.3 -->
<script>
    $(document).ready(function () {
        $('.navbar-nav li').each(function () {
            if ($(this).text() == $('#page-indicator').text()) {
                $(this).addClass('active');
            }
        });
    });
</script>

Upvotes: 0

Vajira Lasantha
Vajira Lasantha

Reputation: 2513

I used following code. Late answer, but I hope this will help someone.

// This will work for both relative and absolute hrefs
function active_menu() {   
    var url = window.location.href;
    $('.nav a').filter(function() {
        return this.href == url;
    }).addClass('selected');
}

Upvotes: 13

daviek19
daviek19

Reputation: 21

I solved this by simply traversing my Menu Urls and matching them with the active page Url then added the active css class to the found result. This worked for me:

       //Get the current page link
       current_page_link = document.location.href;

       //Search your menu for a linkURL that is similar to the active pageURL
       $(".navbar-nav a").each(function(){
           var link_loop = $(this).attr("href");
           if(link_loop === current_page_link){
               var found_url = $(this).attr("href");
               $('.navbar-nav a[href="'+found_url+'"]').addClass('active');
           }
       });

Upvotes: 1

Gary Storey
Gary Storey

Reputation: 1814

$(function() { 
    $('#nav').on('click','.nav', function ( e ) {
        e.preventDefault();
        $(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
        $(activeTab).show();
    });
});

I updated the code to use only one click event on the parent container and in the function reduced the DOM traversals. BUT, you also need to update your CSS. You aren't getting the background color because of specificity. You specified the background color and the hover using the #nav id. So you need to specify the .active class that way as well.

#nav .active { 
    /* css here */
}

Upvotes: 4

Amin Jafari
Amin Jafari

Reputation: 7207

try this:

$(document).ready(function() { 
    $("#nav li .nav").click(function ( e ) {
        e.preventDefault();
        $("#nav li a.active").removeClass("active"); //Remove any "active" class  
        $(this).addClass("active"); //Add "active" class to selected tab  
        $(activeTab).show(); //Fade in the active content  
    });
});

you missed some # and also no need to use $("a", this) $(this) will do the job!

Upvotes: 1

Related Questions