Question

为什么此标签不起作用？

我应该更正jQuery部分吗？

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

＆＃13;

$('#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');
        });

＆＃13;

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

＆＃13;

Answer 1

以这种方式实现药丸行为会偏离这个引导功能的用途。但是，+1用于标记Web辅助功能。

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

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

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

请参阅以下示例：

＆＃13;

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

＆＃13;

bootstrap中的药片不起作用

1 个答案: