Bootstrap 'nav tabs' 在 jsp 中工作不完全答案

【问题标题】：Bootstrap 'nav tabs' works incompletely in jspBootstrap 'nav tabs' 在 jsp 中工作不完全
【发布时间】：2017-03-04 13:11:49
【问题描述】：

我在 jsp 文件中使用 Bootstrap，并使用标签 nav nav-tabs，这是我在 .jsp 文件中的代码：

</head>之前

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <title>content sales</title>

        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    </head>

在</body>之前

<!-- boostrap -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>     
<script>
    $('#myTab a').click(function(e){
        e.preventDefault();
        $(this).tab('show')
    })
</script>

我添加此脚本代码是因为我尝试了 Bootstrap nav tabs/pills works only at first interaction 的解决方案，但它不起作用。

这是我的正文内容：

<div class="container">
    <ul id="myTab" class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#home" data-toggle="tab">All content</a></li>
        <li role="presentation" ><a href="#unbought" data-toggle="tab">Unbought content</a></li>
    </ul>
    <div class="tab-content">
        <!-- all content -->
        <div class="tab-pane active" id="home">
            <table class="table">
                something in table using jsp
            </table>
        </div>

        <!-- unbought-->
        <div class="tab-pane fade" id="unbought">
            <table class="table">
                something in table using jsp            
            </table>
        </div>
    </div>
</div>

问题是当我在 chrome（版本 56.0.2924.87（64 位））中访问这个 jsp 文件时，我第一次点击 All content，Unbought content，它工作正常，但是当我尝试点击同样，我无法从All content 切换到Unbought content 或从Unbought content 切换到All content。

有人可以帮忙吗？

我尝试将所有内容放入一个html文件，结果与jsp文件相同。

【问题讨论】：

标签： css twitter-bootstrap jsp

【解决方案1】：

我更改了 Bootstrap 的链接源，它工作正常。所以我认为问题可能是没有正确包含 Bootstrap 的来源。

【讨论】：