I need the page to detect which "sub" is being displayed and change the style of that particular link so the user can see which is the active link.
Check out this example esp the function checkTab (written in jQuery). I also changed the HTML & CSS by adding a class called current. So if you load this in a browser, you see Today is in red, then when you click on another link, that will get highlighted as well in red.
PHP Code:
<!doctype html>
<html>
<head>
<title>Test</title>
<style>
.hide {
display: none;
}
.current{
color: red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#sub3" id="yesterday">Yesterday</a></li>
<li><a href="#sub1" id="today" class="current">Today</a></li>
<li><a href="#sub2" id="tomorrow">Tomorrow</a></li>
<li><a href="#sub4" id="monthly">Monthly</a></li>
<li><a href="#sub5" id="yearly">Yearly</a></li>
<li><a href="#sub6" id="financial">Financial</a></li>
</ul>
<div id="sub1">Test 1</div>
<div id="sub2" class="hide">Test 2</div>
<div id="sub3" class="hide">Test 3</div>
<div id="sub4" class="hide">Test 4</div>
<div id="sub5" class="hide">Test 5</div>
<div id="sub6" class="hide">Test 6</div>
</div>
<script>
function switchContent(obj) {
obj = (!obj) ? 'sub1' : obj;
var contentDivs = document.getElementsByTagName('div');
for (i=0; i<contentDivs.length; i++) {
if (contentDivs[i].id && contentDivs[i].id.indexOf('sub') !== -1) {
contentDivs[i].className = 'hide';
}
}
document.getElementById(obj).className = '';
}
function checkTab() {
$('a').each(function() {
$(this).click(function() {
tab = $(this).attr('href').split('#');
switchContent(tab[1]);
$('.current').attr('class','');
$(this).attr('class','current');
});
});
}
window.onload = function() {
checkTab();
};
</script>
</body>
</html>
Reply With Quote
Originally Posted by CBResources
Bookmarks