引导选项卡不起作用，但代码看起来不错答案

【问题标题】：Bootstrap Tabs not working but code is looking fine引导选项卡不起作用，但代码看起来不错
【发布时间】：2016-11-03 08:15:36
【问题描述】：

这是我的引导选项卡第一次无法正常工作，我的代码很简单，一切正常，但在我的系统上却无法正常工作。

以下是我的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Tabs </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#profile">Profile</a></li>
            <li><a href="#messages">Messages</a></li>
            <li><a href="#settings">Settings</a></li>
       </ul>

       <div class="tab-content">
            <div class="tab-pane active" id="home">home</div>
            <div class="tab-pane" id="profile">profile</div>
            <div class="tab-pane" id="messages">messages</div>
            <div class="tab-pane" id="settings">settings</div>
       </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap-3 tabs

【解决方案1】：

将 data-toggle="tab" 添加到锚点

<!DOCTYPE html>
<html lang="ENG">
<head>
     <!-- Required meta tags always come first-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
   </head>
   <body>
   <div class="container">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a data-toggle="tab" href="#home" class="nav-link active">Active 1</a>
        </li>
        <li class="nav-item">
            <a data-toggle="tab" href="#profile" class="nav-link">Active 2</a>
        </li>
        <li class="nav-item">
            <a data-toggle="tab" href="#message" class="nav-link">Active 3</a>
        </li>
        <li class="nav-item">
            <a data-toggle="tab" href="#settings" class="nav-link">Disabled</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade in active" id="home">home</div>
        <div class="tab-pane fade" id="profile">profile</div>
        <div class="tab-pane fade" id="message">messages</div>
        <div class="tab-pane fade" id="settings">settings</div>
    </div>
   </div>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
   </body>
   </html>

【讨论】：