Tabs links inside tab to other tabs work but active class not visible & external link not working
1)
I'm having issues with jquery and the tabs I'm using. My tabs work but... I want some more functions and that seems to be a big problem for a Javascript and jquery newby.
My HTML:
- <ul class="tabs">
- <li>Tab1</li>
- <li>Tab2</li>
- <li>Tab3</li>
- <li>Tab4</li>
- <li>Tab5</li>
- <ul>
- <div class="tab_container>
- <div id="first" class="tab_content">...</div>
- <div id="second" class="tab_content">...</div>
- <div id="third" class="tab_content">...</div>
- <div id="fourth" class="tab_content">...</div>
- <div id="fifth" class="tab_content">...</div>
- </div>
Jquery code
- $(document).ready(function() {
- $(".tab_content").hide();
- $("ul.tabs li:first").addClass("active").show();
- $(".tab_content:first").show();
-
- $("ul.tabs li").click(function() {
-
- $("ul.tabs li").removeClass("active");
- $(this).addClass("active");
- $(".tab_content").hide();
-
- var activeTab = $(this).find("a").attr("href");
- $(activeTab).fadeIn();
- return false;
-
- });
I decided to put 4 buttons in the first tab and they should link to the second, third, fourth and fifth tab. I know it's extra and not really neccesary but it looks nice. I even found out how to make te buttons work with the jquery code. I coppied the click function and changed the class. This is what I added after return false;
- $(".round .button").click(function() {
-
- $("ul.tabs li").removeClass("active");
- $(this).addClass("active");
- $(".tab_content").hide();
-
- var activeTab = $(this).find("a").attr("href");
- $(activeTab).fadeIn();
- return false;
-
- });
I really don't know if this is correct but it works! What doesn't work is the active class. If you use one of the buttons in the first tab you go to the right tab but the tab itself has no class called active and that ruins the style.
2)
I also have one other question: lets say that all the above is my second page and I have my frontpage in which I also have buttons. I want somebody to use the button and end up in the third tab of page 2. My link is something like
- page2.html#tab3
I read that using this should lead you the third tab but it's not working for me. You go to the first tab of page 2 instead.
I've been reading a LOT! Jquery for dummies, I googled, read the forum and other forums. I posted on a Dutch forum but no answer. I've added a lot of different code but it doesn't work. I guess you can say I'm a bit frustrated now and I just really hope that someone can help me with this.
Greetings from a sunny (thank god it's not raining) Netherlands,
Annys