mellijae
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.
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.
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>
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.
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'));
remove these 2 lines should stop the popups
alert($(this).attr('href')
alert($('#tabframe').attr(
ASKER
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>
ASKER
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.
ASKER
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window
Open in new window