That line has nothing to do with the error, because putting an alert
right after the selector results in "[object Object]", which is what
is expected
anyways, good practice is that if you are going to show/hide stuff on
page generation, then do it with CSS, that way there's no need to have
jQuery do it.... so if you want "red" to show initally, then set
"green" and "blue" to "display: none" in the CSS...
As for your code, i worked this up and it works perfectly in IE, FF
and Safari
<html>
<head>
<title>Safari Test</title>
<style type="text/css">
#red {
background: #ff0000;
border: 20px solid #000;
}
#green {
background: #00ff00;
border: 20px solid #000;
display: none;
}
#blue {
background: #0000ff;
border: 20px solid #000;
display: none;
}
.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;
}
.tabs {}
</style>
<script type="text/javascript" src="jquery.pack.js"></
script>
<script type="text/javascript">
var _CurrentContainer =
"#red"; //Globally holds current
container ID
$(document).ready(function() {
$('div.tabs ul.tabNavigation
a').click(function() {
$('div.tabs ul.tabNavigation
a').removeClass("selected"); //Removed 'selected' from all nav
hyperlinks
$
(this).addClass("selected"); //Re-add
'selected' to clicked hyperlinl
$
(_CurrentContainer).hide(); //Hide the
current container
$
(this.hash).show(); //Show the
requested container
_CurrentContainer =
this.hash //Remember the new current
container
return
false; //Stop
propigation
});
})
</script>
</head>
<body>
<div class="tabs">
<h1>Test</h1>
<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 selected">
<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>
