使用锚链接打开自定义jQuery选项卡

Question

我需要一些关于jquery选项卡的帮助。我想通过外部锚点链接（http://www.url.com#content2）跳转到特定的选项卡，导航链接将被激活并显示正确的选项卡。 其他HTML页面

<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>

我该如何编辑？谢谢您的帮助。

- user2612903

---

压缩的 JavaScript？！！！ - Praveen Puglia

是的，使用短代码在WordPress中使用。 - user2612903

我的观点是...发布压缩后的JS代码并不能帮助我们真正理解发生了什么。虽然有方法可以弄清楚，但这会让事情变得更加困难。 - Praveen Puglia

Answer 1

使用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>

- Roy Sonasish

---

你在HTML中添加了查询插件吗？ - Roy Sonasish

是的，我添加了制表符，它可以工作，但外部锚链接仍然无法工作。请复制您的代码并在本地测试。 - user2612903

我想要这样做.. <a href="#b">链接到标题2</a>。因此，选项卡2将打开。例如：<div id="tab2" class="panel group"> b <a id="b">标题<a></div> - user2612903

Answer 2

将 href 属性值替换为相应选项卡的 id，并使用以下代码... 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;}

如果需要任何协助，您可以提问。

- Dipesh Rana

---

感谢您的帮助。但外部锚链接无法使用。 - user2612903

你有任何想要的代码片段吗？ - Dipesh Rana