如何以編程方式單擊引導選項卡中的 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