Opening custom jquery tab with anchor
I really need help for jquery tabs. I would like to navigate to a specific tab via an external anchor ( http: //www.url.com#content2 ), the navigation link is activated and the correct tab is displayed. Another HTML page
<a href="#b">B Title</a> | <a href="#bb">B Title</a>
Html
<div class="tabs-container">
<ul class="tabs">
<li class="current"><h4><a href="javascript:void();" data-tab="tab1" title="Title 1">Title 1</a></h4></li>
<li><h4><a href="javascript:void();" data-tab="tab2" title="Title 2">Title 2</a></h4></li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing" style="display: block;">
a
</div>
<div id="tab2" class="panel group" style="display: none;">
<a id="b">B title A<a><br>
information...... <br><br/>
<a id="bb">B title B<a><br>
information...... <br><br/>
</div>
</div>
</div>
Javascript
<script>
(function(a){a.fn.yiw_tabs=function(b){var c={tabNav:"ul.tabs",tabDivs:".containers",currentClass:"current"};b&&a.extend(c,b);this.each(function(){var b=a(c.tabNav,this),f=a(c.tabDivs,this),e;f.children("div").hide();e=0<a("li."+c.currentClass+" a",b).length?"#"+a("li."+c.currentClass+" a",b).data("tab"):"#"+a("li:first-child a",b).data("tab");a(e).show().addClass("showing").trigger("yit_tabopened");a("li:first-child a",b).parents("li").addClass(c.currentClass);a("a",b).click(function(){if(!a(this).parents("li").hasClass("current")){var e=
"#"+a(this).data("tab");a(this);a("li."+c.currentClass,b).removeClass(c.currentClass);a(this).parents("li").addClass(c.currentClass);a(".showing",f).fadeOut(200,function(){a(this).removeClass("showing").trigger("yit_tabclosed");a(e).fadeIn(200).addClass("showing").trigger("yit_tabopened")})}return!1})})}})(jQuery);
</script>
How can I edit? Thank you for your help.
+3
source to share
2 answers
use jQuery this.hash;
$(document).ready(function(){
$('#tab1').show();
$('.tabs li a.current').addClass('current');
$('.tabs li a').click(function() {
var tabDivId = this.hash;
$('.tabs li a').removeClass('current');
$(this).addClass('current');
$('.panel').hide();
$(tabDivId).fadeIn();
return false;
});
});
.panel{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs">
<li><h4><a href="#tab1" data-tab="tab1" title="Title 1">Title 1</a></h4></li>
<li><h4><a href="#tab2" data-tab="tab2" title="Title 2">Title 2</a></h4></li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing">
a
</div>
<div id="tab2" class="panel group">
b
</div>
</div>
+1
source to share
Replace the value of the href attribute with the ID of the corresponding tab and use below code ...
Html
<ul class="tabs">
<li class="current">
<h4><a data-tab="tab1" title="Title 1" href="#tab1">Title 1</a></h4>
</li>
<li>
<h4><a data-tab="tab2" title="Title 2" href="#tab2">Title 2</a></h4>
</li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing" style="display: block;"> a </div>
<div id="tab2" class="panel group" style="display: none;"> b </div>
</div>
Jquery
$('.tabs a').click(function(){
var attr = $(this).attr('href')
$('.tabs li').removeClass('current');
$(this).closest('li').addClass('current');
$('.border-box div').hide();
$(attr).show();
})
CSS
.border-box div { display:none;}
.showing { display:block;}
You can find out if you need any help.
+1
source to share