如何以编程方式单击引导选项卡中的 href 链接？

Question

我正在尝试以编程方式单击引导选项卡中的 href 链接。

这是codepen的链接：

链接到代码笔

    <ul class="nav nav-tabs" id="myNavTabs">
        <li class="active"><a href="#navtabs1" data-toggle="tab">nav-tab 1</a>
        <li><a href="#navtabs2" data-toggle="tab">nav-tab 2</a>
        <li><a href="#navtabs3" data-toggle="tab">nav-tab 3</a>
    </ul>



    <div class="tab-content">
        <div class="tab-pane fade in active" id="navtabs1">nav-tabs content 1</div>
        <div class="tab-pane fade" id="navtabs2">nav-tabs content 2</div>
        <div class="tab-pane fade" id="navtabs3">nav-tabs content 3</div>
    </div>

如何从 javascript/jquery 中单击 function 中的second href tab链接？

Answer 1

HTMLElement 上有一个 clink 方法，因此如果您将id添加到 HTML 的li > a中：

<ul class="nav nav-tabs" id="myNavTabs">
    <li class="active"><a href="#navtabs1"  id="linktab1" data-toggle="tab">nav-tab 1</a>
    <li><a href="#navtabs2" id="linktab2" data-toggle="tab">nav-tab 2</a>
    <li><a href="#navtabs3"  id="linktab3" data-toggle="tab">nav-tab 3</a>
</ul>



<div class="tab-content">
    <div class="tab-pane fade in active" id="navtabs1">nav-tabs content 1</div>
    <div class="tab-pane fade" id="navtabs2">nav-tabs content 2</div>
    <div class="tab-pane fade" id="navtabs3">nav-tabs content 3</div>
</div>

<script>
// You can grab the element and programmatically click on it
document.getElementById('linktabs2').click()
</script>

Answer 2

查看有关导航的 Bootstrap 文档

导航 # 通过 JavaScript

 jQuery('#linktab2').tab('show')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/> <ul class="nav nav-tabs" id="myNavTabs"> <li class="active"><a href="#navtabs1" id="linktab1" data-toggle="tab">nav-tab 1</a> <li><a href="#navtabs2" id="linktab2" data-toggle="tab">nav-tab 2</a> <li><a href="#navtabs3" id="linktab3" data-toggle="tab">nav-tab 3</a> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="navtabs1">nav-tabs content 1</div> <div class="tab-pane fade" id="navtabs2">nav-tabs content 2</div> <div class="tab-pane fade" id="navtabs3">nav-tabs content 3</div> </div>

Answer 3

类似于： 如何在使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡？

$('.nav-tabs a[href="#navtabs2"]').tab('show')

演示

此外，您似乎正在使用 Bootstrap 3，尽管问题被标记为bootstrap-4