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


<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

#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

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

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.

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

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

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.

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.

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. :slight_smile:

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?

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

&lt;div id="content"&gt;
    &lt;div id="page1" class="tab-content"&gt;
        &lt;h1&gt;Page 1&lt;/h1&gt;
        &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div id="page2" class="tab-content"&gt;
        &lt;h1&gt;Page 2&lt;/h1&gt;
        &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div id="page3" class="tab-content"&gt;
        &lt;h1&gt;Page 3&lt;/h1&gt;
        &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div id="page4" class="tab-content"&gt;
        &lt;h1&gt;Page 4&lt;/h1&gt;
        &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div id="page5" class="tab-content"&gt;
        &lt;h1&gt;Page 5&lt;/h1&gt;
        &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- #content --&gt;

</div>
<!-- #wrapper –>
</body>
</html>

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

Hi,

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



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




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




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



Wow - thanks very much. :slight_smile: