Link to home
Start Free TrialLog in
Avatar of mellijae
mellijaeFlag for United States of America

asked on

Simple Javascript for "Active Tab" not wokring

Hi...on my site http://melaniedrouhard.com/testing/  I have created a "tabbed" area at the bottom of the page. I would like for the "Active Tab" to display differently from the other tabs on the page. I'm not sure if I linked my javascript up properly, or if I even am using it correctly in the external file. I am very new to JS. Any help will be greatly appreciated.
Avatar of sammySeltzer
sammySeltzer
Flag of United States of America image

I would do it using css:

	<style type="text/css" media="all">

	body {
		font: small arial, helvetica, sans-serif;
	}

	#header ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#header li {
		display: inline;
		margin: 0 2px 0 0;
	}

	#header a {
		padding: 0 1em;
		text-decoration: none;
		color: #a80;
		background: #fe5;
	}

	#header a:hover {
		background: #fc0;
		color: #540;
	}0123456789a

	#header #active {
	}

	#header #active a {
		padding-bottom: 2px;
		font-weight: bold;
		color: black;
		color: black;
		background: #fc0;
	}

	#content {
		border-top: 2px solid white;
		background: #fc0;
		padding: 1em;
	}

	#content p {
		margin: 0;
		padding: 1em;
		background: white;
	}

	h1 {
		font-size: 1.5em;
		color: #fc0;
	}

	</style>

Open in new window


<div id="header">


<ul>
	<li><a href="#">One</a></li><!--
	--><li id="active"><a href="#">Two</a></li><!--
	--><li><a href="#">Three</a></li><!--
	--><li><a href="#">Four</a></li>
</ul>

</div>

Open in new window

i see you have a javascript function synchTab() but i can't see where you are calling it. Are you sure this is being called?

seen as you have jquery being used already on your website you could try this code attached. Which will add the class activeTab to any link that is clicked. You can then style the active link with some css.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
	$('.tabArea a').click(function() {
		alert($(this).attr('href'));
		alert($('#tabframe').attr('src'));
		if($(this).attr('href') == $('#tabframe').attr('src'))
		{
			$(this).addClass('activeTab');
		}
	});
});
</script>

<style>
#tabArea a.activeTab {
	background:#ff0000;
}
</style>

<div class="tabArea">
	<a class="tab" href="start_divorce.html" target="myIframe">Getting Started...</a>
	<a class="tab" href="faq_onlinedivorce.html" target="myIframe">FAQ's</a>
	<a class="tab" href="tools_resources_onlinedivorce.html" target="myIframe">Tools and Resources</a>
	<a class="tab" href="blog.html" target="myIframe">Blog</a>
</div>

<iframe id="tabframe" class="tabContent" name="myIframe" src="start_divorce.html" marginheight="8" marginwidth="8" frameborder="0"></iframe>

Open in new window

Avatar of mellijae

ASKER

Hi Invsman....

Unless I did something wrong...with the javascript implemented it is actually making "Javascript alerts" pop up when each individual tab is clicked. the alert is "speaking" the name of the page. So when you click on the "FAQ tab" an alert is popping up that  says "faq.html" with an "ok button." Then a second "Javascript Alert is popping up that says "start_divorce.html" and a checkbox that says "prevent this page from creating additional dialogs." I apologize for my naivete when it comes to JS.

I will now try your CSS solution Sammy...will it work with my Iframed content areas? I learned how to do all of this through online tutorials, which I guess weren't as thorough as a newbie like me needs.

THank you both so much for responding. I will report back to you guys about the CSS attempt.
sorry perhaps i didn't explain that very well, The 2 lines with the word alert() are causing the popups, i was using that as a test when i tried the code myself.

remove these 2 lines should stop the popups

alert($(this).attr('href'));
alert($('#tabframe').attr('src'));
Sweet. That took care of hte alerts...but I guess the active tab isn't working again...did I put the code in the right place? Do I need to arrange some CSS? Again I'm so sorry....
ah i see i think some of my javascript may have been off. Try updating the JavaScript to this instead


<script>
//setup variable to hold iframe page
var curpage = '';

$(function() {
	//get current iframe page as variable
	curpage = $('#tabframe').attr('src');
	
	//when you click a tab
	$('.tabArea a').click(function() 
	{
		//remove any current activetab
		$('.tabArea a').removeClass('activeTab');
		
		//update iframe src and the variable
		$('#tabframe').attr('src',$(this).attr('href'));
		curpage = $('#tabframe').attr('src');
		
		//if link we clicked is the same as the iframe page
		//then set the tab to be active
		if($(this).attr('href') == curpage)
		{
			$(this).addClass('activeTab');
		}
	});
});
</script>

Open in new window

Ok....only the first tab is "active" and only if you click it. when you click the other tabs...the content changes but the color doesn't...Is it possible that my css is screwing it up? Thanks again for the quick responses.
yea if you update the javascript to what i just posted i think that should fix that, i can see you haven't updated it yet so give it a try.
Oh sorry. I had only updated it on my local site. And it does work! Except..is there a way for the "getting started" tab to automatically be a different color or i should say the "active" color?

Also...somehow the container for the tabs got resized and i'm having trouble getting the CSS to work. Do you see what the problem could be?

THank you so much again.
ASKER CERTIFIED SOLUTION
Avatar of invsman249
invsman249
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial