Question

我从Bootstrap官方网站上获取了以下代码，但遇到了问题。我想默认启用一个标签页。我尝试了很多事情，但没有帮助。

如果有人编辑我的以下代码，我很乐意。这是一个简单的代码，但我对此深感困惑。

有人可以帮助我还是向正确的方向推动我？

<!DOCTYPE html>
<html>
<head>
  <title>test </title>
    <!-- <link rel="icon" href="images/cv.png" type="image/x-icon"> -->
    <meta charaset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <mata http-equiv="refresh" content="1"></mata>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="cv.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <!-- <script src="https://kit.fontawesome.com/a54d2cbf95.js"></script> -->
</head>
<body>
  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
    </li>
  </ul>
  
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

您好，您可以在相应的“ li.nav-item”上设置活动类

 <li class="nav-item active" role="presentation">
   <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
 </li>

Answer 2

只需使用in active代码即可将其激活

<li class="nav-item in active" role="presentation">
   <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
 </li>

Answer 3

只需使用in active代码即可将其激活

<li class="nav-item in active" role="presentation">

如何自动激活一个标签？

3 个答案: