Menu
I'm having a difficult time figuring out why my tabbed id is not working or functioning like it should. On a click, its supposed to replace the text with something different (i.e. page under construction).
Here is what I have so far..
HTML
<!doctype html>
<html>
<head>
<title>Main Page</title> <!--main page title -->
<script type="text/javascript" scr="home_page.js"></script>
<link rel="stylesheet" type="text/css" href="home_page.css"/>
</head>
<body>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li><a href="#" title="Home" class="active">Home</a></li>
<li><a href="#" title="Inventory">Inventory</a></li>
<li><a href="#" title="Directions">Directions</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>
</body>
</html>
CSS
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
JavaScript
$(home_page.html).ready(function() {
$('navbar ul li a').click(function() {
var tab_id =$(this).attr('href');
$('navbar ul li a').removeClass('active');
$('tab').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});
442
asked Dec 12 '25 23:12
Problems:
$(document).ready - this makes your code run when the page is loadedclass, you need to add a . before it (just like CSS), for example you had $('navbar ul li a') which should be $('.navbar ul li a')href="#", you need to put the correct id of the tabs (e.g. #tab1), and since you already have # here, you don't need it again in $(tab_id)I have fixed your code and you can try a working version below:
$(document).ready(function() {
$('.navbar ul li a').click(function() {
var tab_id = $(this).attr('href');
$('.navbar ul li a').removeClass('active');
$('.tab').removeClass('active');
$(this).addClass('active');
$(tab_id).addClass('active');
});
});h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li><a href="#tab1" title="Home" class="active">Home</a></li>
<li><a href="#tab2" title="Inventory">Inventory</a></li>
<li><a href="#tab3" title="Directions">Directions</a></li>
<li><a href="#tab4" title="Contact Us">Contact Us</a></li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
