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.
mellijaeAsked:
Who is Participating?
 
invsman249Commented:
no problem glad its starting to work :)

to set the getting started tab to already be active you may as well just add the class to the html like below


<a class="tab activeTab" href="start_divorce.html" target="myIframe">Getting Started...</a>

Open in new window

0
 
sammySeltzerCommented:
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

0
 
invsman249Commented:
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

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
mellijaeAuthor Commented:
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.
0
 
invsman249Commented:
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'));
0
 
mellijaeAuthor Commented:
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....
0
 
invsman249Commented:
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

0
 
mellijaeAuthor Commented:
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.
0
 
invsman249Commented:
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.
0
 
mellijaeAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.