Question
I am learning jQuery and cannot understand why this code isn't working. What I want to happen is when a (.tabs > a) is clicked upon, the #title and #content divs should show what is in .tabtitle and .tabcontent that are children of their (.tabs > a ) respectively.
Here is my current HMTL:
https://stackoverflow.com/questions/16639428
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!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">
This is the home tab content
</span>
</a>
<a href="#tab2" id="tab2" class="tab">
About
<span class="tabtitle" id="tabtitle2">
About Title
</span>
<span class="tabcontent" id="tabcontent2">
This is the about 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">
This is the 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">
This is the 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">
This is the 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">
This is the 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 > a {
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 my 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 is working if I separate the jquery into separate functions as shown below, but have been trying to learn how to write less and do more as they say lol. Any advice is greatly 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 so on
Solution
You probably meant to use find(), as .tabtitle and .tabcontent are children of the 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);
});
});
