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>