首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >有人能帮我简化引导选项卡窗格的jQuery代码吗?

有人能帮我简化引导选项卡窗格的jQuery代码吗?
EN

Stack Overflow用户
提问于 2014-01-31 01:44:02
回答 1查看 63关注 0票数 0

当从不同的链接加载特定的选项卡时,我遇到了问题。

我找到了解决方案,但要做到这一点,我必须为所有不同的选项卡编写代码。有人能帮我简化代码吗。

代码语言:javascript
复制
<table class="nav nav-tabs">
<tr>
  <td><a href="#home" data-toggle="tab" class="active">Home</a></td>
  <td><a href="#profile" class="profile-link" data-toggle="tab">Profile</a></td>
  <td><a href="#messages" class="next-link" data-toggle="tab">Messages</a></td>
  </tr>
</table>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>

<a href="#profile" data-toggle="tab" data-toggle-tab=".profile-link" class="outside-link">Profile Link From Outside</a>
<a href="#messages" data-toggle="tab" data-toggle-tab=".next-link" class="next-link">next</a>

<script>
$(".outside-link").click(function() {
    $(".nav-tabs tr td a").removeClass("active");
    $($(this).attr("data-toggle-tab")).parent("td").find("a").addClass("active");
});

$(".next-link").click(function() {
    $(".nav-tabs tr td a").removeClass("active");
    $($(this).attr("data-toggle-tab")).parent("td").find("a").addClass("active");
});
</script>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-01-31 01:50:38

就像这样:

代码语言:javascript
复制
$("[data-toggle-tab]").click(function() {
  $(".nav-tabs tr td a").removeClass("active");
  var href = $(this).attr("href");
  $(".nav-tabs tr td").find("[href='" + href + "']").addClass("active");
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21471094

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档