Hi,
I have been learning Jquery and been following along from a tutorial I
found online.
I have used the latest jquery file, the tutorial is few months old.
The script below does not work in Safari because I used the following
selector :
$('div.tabs > div.containers') instead of $('div.tabs
div.containers');
Why does this not work? I believe Safari 3 is supported by Jquery.
Thanks all.
My Code:
<html>
<head>
<link href="stylesheets/reset.css" type="text/css"
rel="stylesheet"
media="all" />
<style type="text/css">
#red {
background: #ff0000;
border: 20px solid #000;
}
#green {
background: #00ff00;
border: 20px solid #000;
}
#blue {
background: #0000ff;
border: 20px solid #000;
}
.clear { clear: both;}
.containers {
padding: 20px;
width: 400px;
}
.selected {
padding: 5px 10px;
color: #fff;
background: #000;
}
.tabNavigation li {
float: left;
padding: 5px 10px;
list-style-type: none;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.tabs >
.containers'); // errors in
Safari 3 when > used
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation
a').click(function(){
tabContainers.hide();
tabContainers.filter(this.hash).show();
// console.log(this);
$('div.tabs ul.tabNavigation
a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
})
</script>
</head>
<body>
<div class="tabs">
<h1>Test</h2>
<ul class="tabNavigation">
<li><a class="selected" href="#red">Red</a></li>
<li><a href="#green">Green</a></li>
<li><a href="#blue">Blue</a></li>
</ul>
<div id="red" class="containers">
<h4>Red</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed
neque erat, pulvinar vitae, tincidunt eu, tincidunt quis, turpis.
Etiam suscipit turpis vel neque. Cras diam augue, rhoncus a, mattis
at, eleifend sit amet, nisl. Donec tristique nibh ac massa. Aenean a
ante. Aliquam tincidunt egestas orci. Phasellus sit amet sem.
Suspendisse eleifend posuere tellus. Integer sem. Fusce vel odio. Cras
velit. Donec in est. Suspendisse blandit tellus non elit suscipit
luctus. Fusce neque velit, adipiscing at, laoreet sed, viverra
lacinia, nulla. Etiam pharetra eros nec velit. Suspendisse at risus.
Nullam luctus imperdiet arcu. </p>
</div>
<div id="green" class="containers">
<h4>Green</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed
neque erat, pulvinar vitae, tincidunt eu, tincidunt quis, turpis.
Etiam suscipit turpis vel neque. Cras diam augue, rhoncus a, mattis
at, eleifend sit amet, nisl. Donec tristique nibh ac massa. Aenean a
ante. Aliquam tincidunt egestas orci. Phasellus sit amet sem.
Suspendisse eleifend posuere tellus. Integer sem. Fusce vel odio. Cras
velit. Donec in est. Suspendisse blandit tellus non elit suscipit
luctus. Fusce neque velit, adipiscing at, laoreet sed, viverra
lacinia, nulla. Etiam pharetra eros nec velit. Suspendisse at risus.
Nullam luctus imperdiet arcu. </p>
</div>
<div id="blue" class="containers">
<h4>Blue</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed
neque erat, pulvinar vitae, tincidunt eu, tincidunt quis, turpis.
Etiam suscipit turpis vel neque. Cras diam augue, rhoncus a, mattis
at, eleifend sit amet, nisl. Donec tristique nibh ac massa. Aenean a
ante. Aliquam tincidunt egestas orci. Phasellus sit amet sem.
Suspendisse eleifend posuere tellus. Integer sem. Fusce vel odio. Cras
velit. Donec in est. Suspendisse blandit tellus non elit suscipit
luctus. Fusce neque velit, adipiscing at, laoreet sed, viverra
lacinia, nulla. Etiam pharetra eros nec velit. Suspendisse at risus.
Nullam luctus imperdiet arcu. </p>
</div>
</div>
</body>
</html>
