Switching DIV Content & Changing Link Appearence

JavaScript
1

Hi there,

Please bare with me as I try to explain my problem…I’m not always that great at putting it into words!

I am using HTML/Javascipt/CSS to maintain a page whereby the content of the page is switched when a user selects a link. An example of the code used is below for your better understanding:

The container in which all of the content is loaded:

<div id="container">
	<div id="sub1"></div>
	<div id="sub2" class="hide"></div>
	<div id="sub3" class="hide"></div>
   	<div id="sub4" class="hide"></div>
	<div id="sub5" class="hide"></div>
	<div id="sub6" class="hide"></div>
</div>

The Links that control which “sub” to display in the container:

<a href="#" class="mininav" onclick="switchContent('sub3'); self.scrollTo(0,0); return false;">Yesterday</a> |
		<a href="#" class="mininav" onclick="switchContent('sub1'); self.scrollTo(0,0); return false;">Today</a> |
		<a href="#" class="mininav" onclick="switchContent('sub2'); self.scrollTo(0,0); return false;">Tomorrow</a><br />
        <a href="#" class="mininav" onclick="switchContent('sub4'); self.scrollTo(0,0); return false;">Monthly</a> |
        <a href="#" class="mininav" onclick="switchContent('sub5'); self.scrollTo(0,0); return false;">Yearly</a> |
        <a href="#" class="mininav" onclick="switchContent('sub6'); self.scrollTo(0,0); return false;">Financial</a>

The javascript from the header:

<script type="text/javascript">

function switchContent(obj) {

		obj = (!obj) ? 'sub1' : obj;

		var contentDivs = document.getElementById('container').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 = '';
	
	}

</script>

And finally, the CSS attribute assigned to the class “hide”:

.hide {
	display: none;
}

Now all of this works perfectly for me! The user selects whether or not they want to view today’s, tomorrow’s, yesterday’s content etc… and whichever one they select it loads it into the container DIV and hides the rest… just like an iframe but better!

So - I want to add 1 thing to this page and this is what I need help with.

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.

For instance - When the page loads, by default, all subs are hidden except sub1 which is today’s content - So when the page loads, I want the “Today” link to be styled differently to the rest… However, if they then go on to click “Tomorrow” - as well as changing the content like it already does, I need it to also switch the style of the link from the “Today” link to the “Tomorrow” link.

I hope I’m making sense - it sounds ok in my head LOL.

Can anyone help?

2

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.


<!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>
3

Hi centered_effect,

Sorry for waiting so long to reply to you - I’ve been snowed under with other work and I’ve only just had the chance to try out your method.

It does work perfectly so thank you very much for your help.

I would like to know 1 thing though - If you, or anyone else, can help - When I click on the “Yearly” tab in my page, the content of this DIV is substantially longer than the rest of the tabs so I scroll down the page to read it all and then when I click on one of the other tabs at the bottom, I need it to jump back up to the top, which at the moment it does not do - I need to manually scroll back up to the top with this code…

What would I add to the code to make it automatically jump back to the top?

4

window.scrollTo(0,0);

5

Hi Paul,

Thanks - I did realise after I posted it that I already had the answer to that in my original code lol - I was having a forgetful moment.

There is something you might be able to help with though… I want to change the names of the DIV ID’s from sub1, sub2, sub3, sub4, sub5 and sub6 to “today, tomorrow, yesterday, monthly, yearly & financial” respectively.

I tried to do this myself but it messed up the page, presumably because the javascript code calls for “sub1” and “indexOf(‘sub’)” - Is there any easy way for me to do this?

6

Yes there is. Adjust the code so that it it doesn’t rely explicitly on those id attributes. Instead, have the script use the link href values to work out which div to use.

See my post from four days ago that guides you through using this technique.

Show/Hide Divs - #6 by Paul_Wilkins