Geek Answers Handbook

Highlighting an active menu item using jquery

I'm having problems highlighting my active menu items. I use CSS to freeze, but what I understand from other posts is that: active doesn't work with CSS?

This is what I have 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!

+4
source share
6 answers
$(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 in the parent container, and the function reduced DOM traversal. BUT, you also need to update your CSS. Due to the specifics, you do not get the background color. You specified the background color and hover using the id #nav. Therefore, you also need to specify the .active class.

#nav .active { 
    /* css here */
}
+3
source

. , , -.

// 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');
}
+9

:

$(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  
    });
});

#, $("a", this) $(this), !

+1

. .

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

jsfiddle , .

+1

, Url, css . :

       //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');
           }
       });
0

text #page-indicator active <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>
0

More articles:


All Articles