Why is my tab switcher not working?
I'm having a hard time figuring out why my tabbed id isn't working or is working as it should. On click, it is supposed to replace the text with something else (ie. Page under construction).
Here's 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');
});
});
+3
source to share
1 answer
Problems:
- You need to include the jQuery library in your header, before your own script
-
$(document).ready
- this makes your code run on page load. - If you want to select
class
, you need to add.
before it (like CSS), for example you had$('navbar ul li a')
which should be$('.navbar ul li a')
- In your tabbed links you only had
href="#"
, you need to put the correctid
tabs (for example#tab1
), and since you already have it#
here, you don't need it again in$(tab_id)
I have corrected the code and you can try the 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>
+7
source to share