0

我有这个 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 时 - 不再工作了..

任何想法？

4

2 回答 2

0

我有：

$(function(){

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

})

  • 创建一个 ID=OpenCard 的 Button
  • 使用 ID=Deck 更新
工作正常！:D

于 2019-08-26T15:19:28.847 回答
0

你将需要一些 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为每个选项卡的适当值。

于 2019-08-26T15:32:26.470 回答