CSS and jQuery current links navigation: how to update the
  • class

  • Tags: jquery,html,css,html-lists

    Problem :

    I have this jQuery code that retrieves external content using ajax, without refereshing the page, and I also have a navigation links that has the different background color when user is on the current page.

    The jQuery code:

    function loadPage(url)  //the function that loads pages via AJAX
    {
        url=url.replace('#page','');    //strip the #page part of the hash and leave only the page number
    
        //$('#loading').css('visibility','visible');    //show the rotating gif animation
            $('.counter').html('<img src="img/ajax_load.gif" width="16" height="16" style="padding:12px" alt="loading" />');
    
        $.ajax({    //create an ajax request to load_page.php
            type: "POST",
            url: "load_page.php",
            data: 'page='+url,  //with the page number as a parameter
            dataType: "",   //expect html to be returned
            success: function(msg){
    
                if(parseInt(msg)!=0)    //if no errors
                {
                    $('#change-container').html(msg);   //load the returned html into pageContet
    
    
                }
            }
    
        });
    }
    

    the html navigation code:

    <ul>
       <li class="current"><a href="#page1">Home</a></li>
       <li><a href="#page3">Replies</a></li>
       <li><a href="#page4">Favorites</a></li>
    </ul>
    

    So basically when someone clicks on the replies link, I want the li class to change to current, to indicate that you are at that page.



    Solution :

    Example: http://jsfiddle.net/4cs9h/

    $('ul > li > a').click(function() {
        var $th = $(this).parent();
        if( !$th.hasClass('current') ) {
            $th.addClass('current')
                   .siblings('.current').removeClass('current');
            loadPage(this.href);
        }
        return false;
    });
    

    The $th variable refers to the parent <li> of the <a> that was clicked.

    If the <li> does not have the current class, the class will be added and will be removed from any siblings that have that class, and loadPage() will be called, sending the href attribute of the clicked <a>.


    With regard to your comment, yes it would be a good idea to target the specific <ul> with an ID.

    $('#navigation > li > a').click(function() {...
    

    HTML

    <ul id="navigation">
       <li class="current"><a href="#page1">Home</a></li>
       <li><a href="#page3">Replies</a></li>
       ...
    

    To use a hash value included in the page, you can pass it to the loadPage() function.

    var hash = window.location.hash;
    
        if( !hash || hash === '#' )
            hash = "#page1";
    
    loadPage( hash );
    

      CSS Howto..

      How can I cut too wide image in HTML?

      how to bold words within a paragraph in HTML/CSS?

      How to apply css for a class within h2?

      How can I make LIs push their siblings to the same height?

      How to apply a fixed backgound in fullpage.js

      how to apply css rule to the previous and the next element in HTML?

      Selenium IDE - How to check that an element is (CSS) visible?

      How to center a div with dynamic & static content?

      how to set css width equal to length of longest text

      Using vi, how can I remove all lines that contain [searchterm]?

      How to show foreground image and then hide on hover?

      How to split multiple string using jQuery or javascript?

      In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

      How to style a table from horizontal layout to vertical layout with CSS

      How can i make an inline li 100% width of window with horizontal scrolling viewport

      CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
      I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
      Read more

      How to refer to css file in codeigniter? 2.0

      toggleClass: How does this CSS work?

      How can I separate areas with floats from each other?

      CSS - how to code for a specific resolution

      How can I make images fit into a 200 pixel square box using CSS?

      @media query device - how to portrait one css, landscape other?

      How to dynamically change the value of a CSS property inside a stylesheet?

      HTML DIV Overflowing, How To Stop?

      How to make a dropdown sub-menu expand to the right in Bootstrap 3

      How do I animate this box to have a pop out effect?

      How to mail HTML/CSS output as attachment?

      How to get 'div' shaped as a flag with CSS

      How can I vertically align the text in an anchor tag?

      How do I make this carousel implementation better?