dom traversal - jQuery DOM traverse issue -
i learning jquery , cannot understand why code isn't working. want happen when (.tabs > a) clicked upon, #title , #content divs should show in .tabtitle , .tabcontent children of (.tabs > ) respectively.
here current hmtl:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>html 5 tester</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> </header> <nav> <div class="tabs"> <a href="#tab1" id="tab1" class="tab"> home <span class="tabtitle" id="tabtitle1"> home title </span> <span class="tabcontent" id="tabcontent1"> home tab content </span> </a> <a href="#tab2" id="tab2" class="tab"> <span class="tabtitle" id="tabtitle2"> title </span> <span class="tabcontent" id="tabcontent2"> tab content </span> </a> <a href="#tab3" id="tab3" class="tab"> contact <span class="tabtitle" id="tabtitle3"> contact title </span> <span class="tabcontent" id="tabcontent3"> contact tab content </span> </a> <a href="#tab4" id="tab4" class="tab"> graphic design <span class="tabtitle" id="tabtitle4"> graphic design title </span> <span class="tabcontent" id="tabcontent4"> graphic design tab content </span> </a> <a href="#tab5" id="tab5" class="tab"> photography <span class="tabtitle" id="tabtitle5"> photography title </span> <span class="tabcontent" id="tabcontent5"> photography tab content </span> </a> <a href="#tab6" id="tab6" class="tab"> web design <span class="tabtitle" id="tabtitle6"> web design title </span> <span class="tabcontent" id="tabcontent6"> web design tab content </span> </a> </div> </nav> <article> <div id="main"> <p id="title"> </p> <p id="content"> </p> </div> </article> <aside align="right"> </aside> <footer> <span id="cpyrt">© 2013 redloh visions</span> </footer> <script src="scripts/jquery.min.js"></script> <script src="scripts/content.js"></script> </body> </html> my current css:
body { margin:0; width: 100%; position: fixed; height: 100%; border: none; } header { background-color: #036; height: 14%; padding: 9px; box-shadow: inset #000 0px -3px 150px; } nav{ background-color: #666; box-shadow: inset #000 -50px -15px 50px; float:left; width: inherit; height: 59px; } /*----------------------------------------------------------------------------*/ /*--------------navigation tabs styling ----- start --------------------------*/ /*----------------------------------------------------------------------------*/ div.tabs { position: relative; font-size: 0; margin-left: 10px; } div.tabs > { font-family: consolas, "andale mono", "lucida console", "lucida sans typewriter", monaco, "courier new", monospace; margin-left: 10px; display: inline-block; padding: 9px; font-size: 16px; border-radius: 5px 5px 0 0; background-color: #222; color: #fff; text-decoration: none; line-height: 1em; width: 45px; text-align: center; box-shadow: inset #000 0px -3px 6px; -webkit-transition: border-radius 0.3s linear, color 0.5s linear, background-color 1s linear; -moz-transition: border-radius 0.3s linear, color 0.5s linear, background-color 1s linear; -o-transition: border-radius 0.3s linear, color 0.5s linear, background-color 1s linear; width: 140px; margin-top: 25px; text-shadow: #fff 0px 0px 3px; } div.tabs > a:target { font-family: consolas, "andale mono", "lucida console", "lucida sans typewriter", monaco, "courier new", monospace; color: #000; background-color: #08c; box-shadow: inset #001 0px 2px 1px; margin-top: -5px; font-size: 18px; padding-top:12px; width: 140px; border-radius: 16px 16px 0 0; height: 18px; -webkit-transition: border-radius 0.3s linear, color 0.5s linear; -moz-transition: border-radius 0.3s linear, color 0.5s linear; -o-transition: border-radius 0.3s linear, color 0.5s linear; text-shadow: #000 0px 0px 3px; } /*----------------------------------------------------------------------------*/ /*--------------navigation tabs styling ----- end ----------------------------*/ /*----------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------*/ /*--------------main content styling ----- start -----------------------------*/ /*----------------------------------------------------------------------------*/ #main{ position: relative; float:inherit; width: 77%; height: 62%; background-color: #999; box-shadow: #001 0px 16px 50px; margin-top: 1%; margin-left: 2%; } #main p{ margin:10px; } #title{ font-size:56px; text-shadow:#000 2px 0px 4px; } #content{ font-size: 25px; } .tabcontent{ display: none; } .tabtitle{ display: none; } /*----------------------------------------------------------------------------*/ /*----------------main content styling ----- end -----------------------------*/ /*----------------------------------------------------------------------------*/ article{ padding: 5px; float: left; background-color: #444; height: inherit; width: inherit; box-shadow: inset #08c -150px 250px 350px; } aside{ top: auto; padding: 10px; position: fixed; right: 0; background-color: #111; width: 17%; height: inherit; float: right; box-shadow: inset #333 1px -100px 15px; } footer { box-shadow: inset #000 0px -5px 50px; position: fixed; bottom: 0; background-color: #036; width: inherit; height:8%; padding-top: 5px; } #cpyrt{ float: right; padding-right: 20px; } and current jquery:
$(document).ready(function() { $('.tabs a').on( "click", function(){ var title = $closest('.tabtitle').text(); var content = $closest('.tabcontent').text(); $('#title').text(title); $('#content').text(content); }); }); this working if separate jquery separate functions shown below, have been trying learn how write less , more lol. advice appreciated.
$('#tab1').on( "click", function(){ var title = $('#tabtitle1').text(); var content = $('#tabcontent1').text(); $('#title').text(title); $('#content').text(content); }); $('#tab2').on( "click", function(){ var title = $('#tabtitle2').text(); var content = $('#tabcontent2').text(); $('#title').text(title); $('#content').text(content); }); $('#tab3').on( "click", function(){ var title = $('#tabtitle3').text(); var content = $('#tabcontent3').text(); $('#title').text(title); $('#content').text(content); }); ...and on
you meant use find(), .tabtitle , .tabcontent children of clicked anchor :
$(document).ready(function() { $('.tabs a').on( "click", function(e){ e.preventdefault(); var title = $(this).find('.tabtitle').text(), content = $(this).find('.tabcontent').text(); $('#title').text(title); $('#content').text(content); }); });
Comments
Post a Comment