Question

我试图通过创建按钮来浏览引导选项卡来增强UX。我试图通过单击导航选项卡欺骗浏览器替换按钮上的点击。它在浏览器中工作（虽然它不在下面的jsfiddle中），并且一旦到达第二个选项卡，浏览器就会刷新并返回到第一个选项卡。你能不能帮助我阻止这种情况发生？提前致谢

<ul class="nav nav-tabs" id="myTab">
          <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
          <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
          <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
          <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="home">Home
    <br>
     <div id="avc1"><button class="btn btn-success">Avançar<span class="glyphicon glyphicon-chevron-right"></span></button></div>
    </div>
          <div class="tab-pane" id="profile">Profile</div>
          <div class="tab-pane" id="messages">Message</div>
          <div class="tab-pane" id="settings">Settings</div>
        </div>

Jquery的exerpt

$( "#avc1" ).click(function() {
  $( "#profile" ).click();

});

http://jsfiddle.net/vitordhers/ocz2umz2/1/

Answer 1

这不是显示标签的正确方法。根据bootstrap选项卡的文档。

通过JavaScript启用可列表标签（每个标签需要单独激活）：

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

您可以通过多种方式激活各个标签：

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

如何创建工作按钮来导航Bootstrap选项卡？

1 个答案: