external links for simple jquery tabs WordPress
- SOLVED
I use the simple tab script:
jQuery(document).ready(function() {
jQuery(".tab_content").addClass("hide").hide();
jQuery("ul.tabs li:first").addClass("active").show();
jQuery(".tab_content:first").show();
jQuery("ul.tabs li").click(function() {
jQuery("ul.tabs li").removeClass("active");
jQuery(this).addClass("active");
jQuery(".tab_content").addClass("hide").hide();
var activeTab = jQuery(this).find("a").attr("href");
if (jQuery.browser.msie)
{jQuery(activeTab).show();}
else
{jQuery(activeTab).fadeIn();}
return false;
});
});
I need to call different tabs with a text link e.g.: <a href="#tab2">tab2</a>
The external link should work in tab content and from other pages.
Any thoughts how to mod the script ?
Answers (4)
Julio Potier answers:
Hello
Can you share me the HTML template ? I can not make it blindly.
Thank you
Peter Brain comments:
Sorry, this is the html:
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>Tab 1 Content Goes Here</p>
</div>
<div id="tab2">
<p>Tab 2 Content Goes Here</p>
</div>
<div id="tab3">
<p>Tab 3 Content Goes Here</p>
</div>
</div><!-- close tab_container -->
Julio Potier comments:
This template is not correct ... there is only one "tab_content" instead of 3 and ul.tabs does not exists.
however i'll try to help ...
Julio Potier comments:
Ok here comes a full fonctionnal code:
<html>
<head>
<style>
.active{background-color:cyan;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery(".tab_content:not(:first)").addClass("hide").hide();
jQuery("ul.tabs li:first").addClass("active").show();
jQuery("a.tabsclic").click(function() {
jQuery("ul.tabs li").removeClass("active");
var $this = jQuery(this).attr('href');
jQuery("ul.tabs li > a.tabsclic[href="+$this+"]").parent().addClass("active");
jQuery(".tab_content").addClass("hide").hide();
var activeTab = jQuery($this);
if (jQuery.browser.msie)
{jQuery(activeTab).show();}
else
{jQuery(activeTab).fadeIn();}
return false;
}); });
</script>
</head>
<body>
<ul class="tabs">
<li><a class="tabsclic" href="#tab1">Tab 1</a></li>
<li><a class="tabsclic" href="#tab2">Tab 2</a></li>
<li><a class="tabsclic" href="#tab3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>Tab 1 Content Goes Here</p>
</div>
<div id="tab2" class="tab_content">
<p>Tab 2 Content Goes Here</p>
</div>
<div id="tab3" class="tab_content">
<p>Tab 3 Content Goes Here</p>
</div>
</div>
<a href="#tab1" class="tabsclic">test 01</a>
</body>
</html>
Your jQuery code have been changed :
<script>
jQuery(document).ready(function() {
jQuery(".tab_content:not(:first)").addClass("hide").hide();
jQuery("ul.tabs li:first").addClass("active").show();
jQuery("a.tabsclic").click(function() {
jQuery("ul.tabs li").removeClass("active");
var $this = jQuery(this).attr('href');
jQuery("li > a.tabsclic[href="+$this+"]").parent().addClass("active");
jQuery(".tab_content").addClass("hide").hide();
var activeTab = jQuery($this);
if (jQuery.browser.msie)
{jQuery(activeTab).show();}
else
{jQuery(activeTab).fadeIn();}
return false;
}); });
</script>
Every link with <strong>class="tabsclic"</strong> can change a tab. My <strong>.active</strong> is just for example.
The template changed a little :
i added tab_content on every DIV and clas "tabs" on the UL.
See you soon !
Peter Brain comments:
This work great +1
could you give me a hint how to use conditional functions with this ?
In the old script i use if(activeTab == '#tab3') { initialize(); }
to call a google map but now this do not work anymore.
Julio Potier comments:
Of course :
if( $this == '#tab3') { initialize(); }
Peter Brain comments:
Great, thanks a lot ! I'll award you the money.
One last question, how to use an anchor to scroll to the tab if the link is used.
Julio Potier comments:
Try :
<a href="#tab1" <strong>name="tab1"</strong>>Tab 1</a>
Romel Apuya answers:
just remove false
in return false;
return;
Peter Brain comments:
I try it but the link do not work.
Francisco Javier Carazo Gil answers:
Hello,
You can know which element you have selected parsing the URL string, for example with JavaScript:
var url = window.location.href;
var myId = url.split("#")[1]; // you will have the right part with id
Then in jQuery, you select the correct one:
$('#' + myId).focus();
designchemical answers:
jQuery(document).ready(function() {
jQuery(".tab_content").addClass("hide").hide();
var hash = document.URL.split('#')[1];
if(hash == undefined){
jQuery("ul.tabs li:first").addClass("active").show();
jQuery(".tab_content:first").show();
} else {
jQuery("ul.tabs li a[href=#"+hash+"]").parent().addClass("active");
if (jQuery.browser.msie)
{jQuery(hash).show();}
else
{jQuery(hash).fadeIn();}
}
jQuery("ul.tabs li").click(function() {
jQuery("ul.tabs li").removeClass("active");
jQuery(this).addClass("active");
jQuery(".tab_content").addClass("hide").hide();
var activeTab = jQuery(this).find("a").attr("href");
if (jQuery.browser.msie)
{jQuery(activeTab).show();}
else
{jQuery(activeTab).fadeIn();}
return false;
});
});