javascript - Why does my tab switch not work? -
i'm having difficult time figuring out why tabbed id not working or functioning should. on click, supposed replace text different (i.e. page under construction).
here have 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 express shop!</h3> <p>your 1 stop shop repairs! work various laptops, pcs, iphones, ipads, tablets, smart phones , more!</p> <p> authorized dealer pageplus cellular , have many products in our inventory 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 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 { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; } .navbar ul li:last-child { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; } .navbar ul li { 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 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'); }); });
problems:
- you need include jquery library in header, before own script
$(document).ready- makes code run when page loaded- when want select
class, need add.before (just css), example had$('navbar ul li a')should$('.navbar ul li a') - in tab links, had
href="#", need put correctidof tabs (e.g.#tab1), , since have#here, don't need again in$(tab_id)
i have fixed code , can try 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 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 { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; } .navbar ul li:last-child { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; } .navbar ul li { 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 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 express shop!</h3> <p>your 1 stop shop repairs! work various laptops, pcs, iphones, ipads, tablets, smart phones , more!</p> <p> authorized dealer pageplus cellular , have many products in our inventory 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>
Comments
Post a Comment