gpt4 book ai didi

jquery - 谁能帮我简化 bootstrap 选项卡 Pane 的 jQuery 代码

转载 作者:行者123 更新时间:2023-11-28 11:22:41 24 4
gpt4 key购买 nike

当从不同的链接转到事件时,我在将特定选项卡加载为事件时遇到问题。

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

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

最佳答案

像这样:

$("[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");
});

关于jquery - 谁能帮我简化 bootstrap 选项卡 Pane 的 jQuery 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21471094/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com