0

我页面上多个选项卡的代码（动态显示这些选项卡和内容）：

jQuery('.tab-block li a').click(function() {
var theitem = jQuery(this);
theitem.parent().parent().find("li").removeClass("active");
theitem.parent().addClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").removeClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").eq(theitem.parent().index()).addClass("active");
return false;
});

在我的 HTML 中显示标签的代码：

<div class="tab-block">
<div class="tabs">
    <ul>
<li class="active"><a href="#">TAB 1</a></li>
<li><a href="#">TAB 2</a></li>
</ul>
<div class="clear-float"></div>
</div>
<div class="tab-content">
<ul>
<li class="active">
<p><h3><a href="http://www.google.com/" rel="nofollow" target="_blank">Goole.com</a></h3></a>
<p>Content</p>
</li>
<li>
<p><h3><a href="http://www.google.com/" rel="nofollow" target="_blank">Goole.com</a></h3></a>
<p>Content</p>
</li>
</ul>
</div>
</div>

现在所有选项卡都运行良好，但不会打开任何链接（选项卡本身内的 H3 链接）。任何想法我做错了什么？谢谢你。

4

1 回答 1

0

我不知道您的具体问题是什么，您可能想提供一个指向 jsfiddle 的链接，以使自己清楚，但如果您需要标签，请尝试EZ tabs jQuery 插件。

HTML：

<div class="tab-block">
  <div class="tabs">
    <ul class='nav'>
      <li>TAB 1</li>
      <li>TAB 2</li>
    </ul>
    <div class="clear-float"></div>
  </div>
  <div class="tab-content">
    <div class='box'>
      <p>
      <h3><a href="http://www.google.com/" rel="nofollow" target="_blank">Goole.com</a></h3>
      </a>
      <p>Content</p>
    </div>
    <div class='box'>
      <p>
      <h3><a href="http://www.google.com/" rel="nofollow" target="_blank">Goole.com</a></h3>
      </a>
      <p>Content</p>
    </div>
  </div>
</div>

jQuery，准备好文档：

$('.tab-block').eztabs({
    tabsList : 'ul.nav',
    animation: 'slideLeftRight',
    boxContainer: '.tab-content',
    animationTime: 200
});

jsfiddle

于 2015-09-17T12:22:02.527 回答