javascript - Bootstrap 导航选项卡作为按钮

Question

我是 js/bootstrap 的新手，正在从官方网站上阅读相关内容。我的导航标签有问题。在官方示例中，他们将用户带到其他一些网址，如下所示:

<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

您可以更改 <a> 的 native 行为与JS。例如，如果您设置类似的内容，则链接将执行您的 doSomething功能但不会将您链接到另一个页面:

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

更进一步，如果您想更好地分离 JS 和 HTML(好的做法)，请避免使用 inline-javascript 并更喜欢使用监听器:https://developer.mozilla.org/fr/docs/DOM/element.addEventListener