时间戳

首页 > 解决方案 > 替换引导选项卡中的选项卡不仅是边框

jquery - 替换引导选项卡中的选项卡不仅是边框

问题描述

以下代码用于引导选项卡，在此活动选项卡具有边框并分别显示其选项卡，但我希望当任何人单击第二个选项卡时，第一个选项卡被第二个选项卡替换，并且当一个人单击第三个选项卡 第一个选项卡被第三个选项卡替换。谁能告诉我如何实现这一目标？

这是代码片段：

<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">...</div>
            <div role="tabpanel" class="tab-pane" id="profile">...</div>
        </div>
    </div>
  </body>
</html>

标签： jqueryhtmlgwtbootstrap3

解决方案

我希望这能帮到您...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>


<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
        <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
    </div>
</div>

推荐阅读