如何使用链接更改导航链接药丸？答案

【问题标题】：How to change a nav-link pill with a link?如何使用链接更改导航链接药丸？
【发布时间】：2019-08-26 14:35:55
【问题描述】：

我有这个 Bootstrap Nav-pills - 有 2 个标签：

<ul class="nav nav-pills nav-fill kt-portlet__space-x" role="tablist">
    <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#menu11"><span> TAB1</span></a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#menu21"><span>TAB2</span></a>
    </li>
</ul>

在 TAB2 内我有一个按钮，我需要更改为 TAB1 onclick。有可能吗？

我试试这个：

<input type="button" data-toggle="pill" href="#menu11" value="GO TO TAB1">

打开 TAB1 - 但是.. 不激活 tab1（“活动边框”仍在 tab2 上） - 当我返回 Tab2 时 - 不再工作了..

有什么想法吗？

【问题讨论】：

标签： css bootstrap-4 nav-pills

【解决方案1】：

我明白了：

$(function(){

    $('#opencard').click(function(e){
        e.preventDefault();
        $('#deck a[href="#menu11"]').tab('show');
    })

})

创建一个 ID=OpenCard 的按钮
使用 ID=Deck 更新

工作正常！ :D

【讨论】：

【解决方案2】：

你需要一些 JS 来完成你所追求的。您需要从示例中删除按钮上的 data-toggle="pill" 属性。 #theButton 在此示例中是您要用于切换选项卡的按钮的 ID。

$('#theButton').on('click', function(e) {
  e.preventDefault();
  $('#menu11').tab('show');
});

作为旁注，您可能会为每个 nav-link 添加一些可访问性项目：

role="tab" aria-controls="menu21" aria-selected="false"

将aria-controls 和aria-selected 替换为每个选项卡的适当值。

【讨论】：