0

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

我应该更正 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>

4

1 回答 1

0

Implementing pill behaviour this way strays from how this bootstrap feature was intended to be use. However, +1 for marking up for web accessibility.

It should be plug and play in most cases.

First, include Bootstrap CSS stylesheet and custom Javascript library. Bootstrap custom Javascript library should be added after the jQuery library.

Remove away your Javascript code for navigation pills. Using the right markup ensures the intended behaviour is achieved.

See example below:

<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>

于 2017-12-15T06:42:14.743 回答