Question

我是js / bootstrap的新手，正在从官方网站上阅读。我对nav-tabs有问题。在官方示例中，他们将用户带到其他网址，如下所示：

<ul class="nav nav-tabs">
       <li class="active"><a href="#">Search</a></li>
       <li><a href="">Click</a></li>
        <li><a href="">Play</a></li>
       <li><a href="">Hours Viewed</a></li>
</ul>

但我的要求是点击这些标签调用一些js方法。是否可以使用nav-tabs？还是我必须使用按钮？

Answer 1

我能想到的最简单的方法是为每个onclick标记添加<a>属性...

也许是这样的......

<ul class="nav nav-tabs">
       <li><a onclick="clickFirst();" href="#">Click</a></li>
       <li><a onclick="clickSecond();" href="#">Play</a></li>
       <li><a onclick="clickThird();" href="#">Hours Viewed</a></li>
</ul>

并在脚本标记中添加...

function clickFirst() {
    alert('First anchor clicked...');
}

function clickSecond() {
    alert('Second anchor clicked...');
}

function clickThird() {
    alert('Third anchor clicked...');
}

Answer 2

您可以使用JS更改<a>的本机comportement。例如，如果您设置了类似的内容，该链接将执行您的doSomething功能，但不会将您链接到其他页面：

<a href="javascript:void(0)" onclick="doSomething()">click me</a>

更进一步，如果你想更好地分离JS和HTML（良好实践），请避免使用内联javascript并更喜欢使用监听器：https://developer.mozilla.org/fr/docs/DOM/element.addEventListener

Answer 3

您可以使用bootstrap javascript。这个是关于tab。

以下是示例代码：

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

Bootstrap Nav选项卡作为按钮

3 个答案: