引导程序中的药丸标签不起作用答案

【问题标题】：pill-tab in bootstrap dont works引导程序中的药丸标签不起作用
【发布时间】：2017-12-15 14:46:44
【问题描述】：

为什么这个标签不起作用？

我应该更正 jQuery 部分吗？

Id 和 Href 是真的，但它不起作用。

$('#v-pills-tab a').on('click', function (e) {
            e.preventDefault();
            $('#v-pills-tab a[href="#v-pills-home"]').tab('show');
        });
        $('#v-pills-tab a').on('click', function (e) {
            e.preventDefault();
            $('#v-pills-tab a[href="#v-pills-profile"]').tab('show');
        });

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
    </div>
    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">home</div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">profile</div>
    </div>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap-4-beta

【解决方案1】：

以这种方式实现药丸行为偏离了该引导功能的预期使用方式。但是，+1 用于标记网络可访问性。

在大多数情况下应该是即插即用的。

首先，包括 Bootstrap CSS 样式表和自定义 Javascript 库。 Bootstrap 自定义 Javascript 库应该在 jQuery 库之后添加。

删除导航药片的 Javascript 代码。使用正确的标记可确保实现预期的行为。

见下例：

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <ul class="nav flex-column nav-pills" role="tablist" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <li role="presentation" class="active">
      <a class="nav-link active" data-toggle="pill" href="#v-pills-home" role="tab" aria-selected="true" aria-controls="v-pills-home" id="v-pills-home-tab">Home</a>
    </li>
    <li role="presentation">
      <a class="nav-link" data-toggle="pill" href="#v-pills-profile" role="tab" aria-selected="false" aria-controls="v-pills-profile" id="v-pills-profile-tab">Profile</a>
    </li>
  </ul>
  
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade in active" id="v-pills-home" role="tab-panel" aria-labelledby="v-pills-home-tab">home</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tab-panel" aria-labelledby="v-pills-profile-tab">profile</div>
  </div>
</body>

【讨论】：