SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Active Links in Tabbed Menu

    Hi
    I've made a tabbed menu using Jquery.
    I'm having trouble styling active links. I'm sure it's something pretty simple but I'm pretty new to Jquery and just can't work it out.
    (a:hover works fine, and I get a flash of the active colour (#00ff00) when I am actually clicking on a link).
    Thanks


    This is what I've got so far:
    HTML
    HTML Code:
    <div id="wrapper">
    <div id="nav">
    <ul>
    <li><a id="menu1"  href="#">page1</a></li>
    <li><a id="menu2"  href="#">page2</a></li>
    <li><a id="menu3"  href="#">page3</a></li>
    <li><a id="menu4"  href="#">page4</a></li>
    <li><a id="menu5"  href="#">page5</a></li>
    </ul>
    </div>
    
     <div id="content">  
     
        <div id="page1" class="tab-content">
    
            </div>
            
             <div id="page2" class="tab-content">
              
            </div>
            
             <div id="page3" class="tab-content">
        
            </div>
            
            <div id="page4" class="tab-content">
         
            </div>
            
            <div id="page5" class="tab-content">
    
            </div>
            
           
    </div> 
    
    </div> <!--#wrapper--> 
    CSS
    Code:
    #nav li a:link, #nav li a:visited{
    	display: block;
    	text-decoration: none;
    	color: #ffffff;
    }
    
    #nav li a:hover {
    color: #ff0000;
    }
    
    #nav li a:active {
    color: #00ff00;
    }
    JS
    Code:
    // JavaScript Document
      $(document).ready(function () {
                    $('#page2').hide();
    		$('#page3').hide();
    		$('#page4').hide();
    		$('#page5').hide();
    
                $('a#menu1').click(function () {
                    $('.tab-content').hide();
    		$('#page1').fadeIn('slow');
    				
                });
    			
    		$('a#menu2').click(function () {
                    $('.tab-content').hide();
    		$('#page2').fadeIn('slow');
    				
                });
    			
    		$('a#menu3').click(function () {
                    $('.tab-content').hide();
    		$('#page3').fadeIn('slow');
    				
                });
    			
    		$('a#menu4').click(function () {
                    $('.tab-content').hide();
    		$('#page4').fadeIn('slow');
    				
                });
    			
    		$('a#menu5').click(function () {
                    $('.tab-content').hide();
    		$('#page5').fadeIn('slow');
    				
                });
            });

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    To start i will say what you have above is very redundant code but i don't consider it bad code because i used to be a beginner once too, so to break it down here is what i found:
    • Your navigation menu can target your internal pages by simply using the href attribute, using a specific id to target a click event and then swap the page is a bad practice and should be avoided at all costs
    • All your jQuery code was again very redundant, using a context/class to reference your target is how you should always target a bundle of elements in the DOM as it improves performance

    It may be a short list but it can help in your future career as a JavaScript developer, see the below code which i based off your code but it has 0 redundancies and cleaner code. The one change you will see amongst everything else is the addClass and removeClass methods which now adds and removes a class called "active" which is targeted in the CSS to add the correct styling to the element.

    HTML Code:
    <div id="wrapper">
        <div id="nav">
            <ul>
                <li><a href="#page1">Page 1</a></li>
                <li><a href="#page2">Page 2</a></li>
                <li><a href="#page3">Page 3</a></li>
                <li><a href="#page4">Page 4</a></li>
                <li><a href="#page5">Page 5</a></li>
            </ul>
        </div>
        <!-- #nav -->
        
        <div id="content">
            <div id="page1" class="tab-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page2" class="tab-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page3" class="tab-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page4" class="tab-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page5" class="tab-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <!-- #content -->
    </div>
    <!-- #wrapper -->
    Code CSS:
    #nav li a:link,
    #nav li a:visited {
        color: #fff;
        display: block;
        text-decoration: none;
    }
     
    #nav li a:hover,
    #nav li.active a {
        color: #ff0000;
    }

    Code JavaScript:
    $(function () {
        // Hide the tabbed content except for the first internal page
        $('.tab-content:not(:first)').hide();
     
        // Set the click handlers for the tab navigation
        $('#nav').on('click', 'a', function(e) {
            e.preventDefault();
     
            // Get the page id
            var page = $(this).attr('href');
     
            // Set, un-set the active states
            $(this)
                .parent()
                .addClass('active')
                .siblings()
                .removeClass('active');
     
            // Toggle the internal page content
            $('.tab-content').hide(0, function() {
                $(page).fadeIn('slow');
            })
        });
    });

    NOTE: I didn't get a chance to test the above code but it should work fine.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I tried this exactly as you have written it but it doesn't seem to be working. The colour shows the menu as links and hover works but the content doesn't change on click (I did alter the Lorem Ipsum slightly so I could tell whether it was changing).

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found this tutorial: http://trevordavis.net/blog/jquery-tabbed-navigation which works, but the code provided for non-Javascript users doesn't seem to work. Is this a problem? I'm guessing we should really be providing for those without Javascript.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Apart from a couple of very minor functional changes to the code i posted it works fine, see the following jsFiddle for a working demo.

    http://jsfiddle.net/755HE/
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does work. I had a really old version of jQuery. Another lesson learned I guess.
    Sorry about that but thanks very much for your help.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    The above solution doesn't display the content of the homepage in IE8 when i first load the site.

    If I navigate to another tab and back again, it appears. Just wondering if there's something I could have done wrong or if there is a fix?

  8. #8
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Here is the complete code, which works as you expected in all browsers, I have fixed display:inline-block issue also for IE.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script>

    $(document).ready(function(){

    // Hide the tabbed content except for the first internal page
    $('.tab-content').hide();

    // Set the first tab as active
    $('li:first', '#nav').addClass('active');

    // Set the click handlers for the tab navigation
    $('#nav').on('click', 'a', function(e) {
    e.preventDefault();

    // Ensure the current tab isn't been clicked
    if ($(this).parent().index() === $('li.active', '#nav').index()) {
    return;
    }

    // Get the page id
    var page = $(this).attr('href');

    // Set, un-set the active states
    $(this)
    .parent()
    .addClass('active')
    .siblings()
    .removeClass('active');

    // Toggle the internal page content
    $('.tab-content').hide(0, function() {
    $(page).show(0);
    });
    });

    $('.tab-content:first').show();
    });
    </script>
    <style>
    body {
    background-color: #1a1a1a;
    color: #fff;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 16px;
    padding: 10px;
    }

    #nav {
    margin-bottom: 10px;
    width: 100%;
    }

    #nav li {
    display: inline-block;
    padding: 0 5px;
    *display:inline;
    *zoom:1;
    }

    #nav li a,
    #nav li a:visited {
    color: #fff;
    display: block;
    text-decoration: none;
    }

    #nav li a:hover,
    #nav li.active a {
    color: #ff0000;
    }

    #content h1 {
    color: #ccc;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    }
    </style>

    </head>

    <body>
    <div id="wrapper">
    <div id="nav">
    <ul>
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>
    <li><a href="#page5">Page 5</a></li>
    </ul>
    </div>
    <!-- #nav -->

    <div id="content">
    <div id="page1" class="tab-content">
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div id="page2" class="tab-content">
    <h1>Page 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div id="page3" class="tab-content">
    <h1>Page 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div id="page4" class="tab-content">
    <h1>Page 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div id="page5" class="tab-content">
    <h1>Page 5</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </div>
    <!-- #content -->
    </div>
    <!-- #wrapper -->
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Initially hide everything and show the first tab-content at end of the script.

    // Hide the tabbed content
    $('.tab-content').hide();


    //Show the first tab content.
    $('.tab-content:first').show();


    // This fixes the IE inline-block issue.
    #nav li {
    display: inline-block;
    padding: 0 5px;
    *display:inline;
    *zoom:1;
    }

    Hope this helps...

    Thanks,
    Raghavender Reddy

  10. #10
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Here is the complete code, which works in all browsers as you expected.


    Code CSS:
     
    	body {
        background-color: #1a1a1a;
        color: #fff;
        font-family: sans-serif;
        font-size: 12px;
        line-height: 16px;
        padding: 10px;
    }
     
    #nav {
        margin-bottom: 10px;
        width: 100%;
    }
     
    #nav li {
        display: inline-block;
        padding: 0 5px;
    	*display:inline;
    	*zoom:1;
    }
     
    #nav li a,
    #nav li a:visited {
        color: #fff;
        display: block;
        text-decoration: none;
    }
     
    #nav li a:hover,
    #nav li.active a {
        color: #ff0000;
    }
     
    #content h1 {
        color: #ccc;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

    Code JavaScript:
     
    $(document).ready(function(){
     
    	// Hide the tabbed content except for the first internal page
    $('.tab-content').hide();
     
    // Set the first tab as active
    $('li:first', '#nav').addClass('active');
     
    // Set the click handlers for the tab navigation
    $('#nav').on('click', 'a', function(e) {
        e.preventDefault();
     
        // Ensure the current tab isn't been clicked
        if ($(this).parent().index() === $('li.active', '#nav').index()) {
            return;
        }
     
        // Get the page id
        var page = $(this).attr('href');
     
        // Set, un-set the active states
        $(this)
            .parent()
            .addClass('active')
            .siblings()
            .removeClass('active');
     
        // Toggle the internal page content
        $('.tab-content').hide(0, function() {
            $(page).show(0);
        });
    });
     
    $('.tab-content:first').show();
      });

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    </head>
    
    <body>
    <div id="wrapper">
        <div id="nav">
            <ul>
                <li><a href="#page1">Page 1</a></li>
                <li><a href="#page2">Page 2</a></li>
                <li><a href="#page3">Page 3</a></li>
                <li><a href="#page4">Page 4</a></li>
                <li><a href="#page5">Page 5</a></li>
            </ul>
        </div>
        <!-- #nav -->
        
        <div id="content">
            <div id="page1" class="tab-content">
                <h1>Page 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page2" class="tab-content">
                <h1>Page 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page3" class="tab-content">
                <h1>Page 3</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page4" class="tab-content">
                <h1>Page 4</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
    
            <div id="page5" class="tab-content">
                <h1>Page 5</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <!-- #content -->
    </div>
    <!-- #wrapper -->
    </body>
    </html>
    

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - thanks very much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •