Is there a way to change the display of a content div to block when a specific tab is selected by the user, while hiding all other content divs?
Here is the JQuery code I have tried so far:
$(document).ready(function() {
function resetTabs() {
$("#content > div").hide();
$("#tabs a").attr("id", "");
}
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0, 4);
(function () {
$("#content > div").hide();
$("#tabs li:first a").attr("id", "current");
$("#content > div:first").fadeIn();
$("#tabs a").on("click", function (e) {
e.preventDefault();
if ($(this).attr("id") == "current") {
return
}
else {
resetTabs();
$(this).attr("id", "current");
$($(this).attr('name')).fadeIn();
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='" + myUrlTab + "']").attr("id", "current");
$(myUrlTab).fadeIn();
}
}
})()
});
$(document).ready(function() {
$("#tabContent1").load("test.txt");
$('a[name="#tab2"]').click(function() {
$("#tabContent2").load("test.txt");
});
});
Here is the HTML structure I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/common.css" />
<script src="JS/common.js"></script>
<title></title>
</head>
<body>
<nav>
<ul id="tabs">
<li><a href="#" id="tab1" name="#tab1">Home</a></li>
<li><a href="#" id="tab2" name="#tab2">History</a></li>
<li><a href="#" id="tab3" name="#tab3">Specifications</a></li>
<li><a href="#" id="tab4" name="#tab4">Gallery</a></li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
</div>
</body>
</html>
I've encountered the following error while implementing this:
Uncaught TypeError: Object #tabContent2 has no method 'fadeIn'
i
st.event.dispatch
st.event.add.y.handle