Question

因此，我尝试用特定的表ID来href链接，以便在打开链接时，所调用的特定表ID将被打开的活动选项卡（即www.gohome.com/html#profile）。但是无论我做什么，活动选项卡仍然停滞不前，特别是叫出选项卡ID似乎什么也没做。这是我的代码：

<div class="tab-content">
 <div role="tabpanel" class="tab-pane active" id="profile">
  <div class="single-service">
   <h3>me</h3>
  </div>
 </div>

 <div role="tabpanel" class="tab-pane " id="messages">
  <div class="single-service">
   <h2>you</h2>
  </div> 
 </div>
</div>


<ul class="nav nav-tabs" role="tablist">
 <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">me </a></li>
 <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">you</a></li>
              </ul>

我开始认为，如果没有实现某种脚本，这是无法完成的。但我不是那么擅长编码。任何形式的帮助都会很棒。谢谢你提前。

Answer 1

您的诀窍可能是您的参考。您需要在HTML顶部添加jQuery和bootstrap.js的JavaScript参考。这就是根据单击的选项卡显示和隐藏不同内容的功能背后的魔力。

<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

这是您的代码的完整示例：

<head>
  <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>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">me </a>
    </li>
    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">you</a>
    </li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="profile">
      <div class="single-service">
        <h3>me</h3>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane " id="messages">
      <div class="single-service">
        <h2>you</h2>
      </div>
    </div>
  </div>
</body>

调出特定的navtab

1 个答案: