bootstreap2中标签页（tab）无法响应的问题

最新推荐文章于 2022-04-02 16:35:32 发布

iwgo

最新推荐文章于 2022-04-02 16:35:32 发布

阅读量1.2k

点赞数

分类专栏： bootstrap2 文章标签：问题解决常见错误

本文链接：https://blog.csdn.net/AoIek/article/details/39671459

版权

bootstrap2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这几天在做毕业设计，遇到了许多问题，其中就有个问题困扰了我很长时间，就使用bootstreap调用标签页的问题，代码样式都没错误，但是点上面的标签却无法切换，原来是这样，在html中如果存在两个或以上的.js，调用jquery.js的先后对结果产生影响

错误的调用方式:

正确的调用方式是把jquery.js放在前面。

测试代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>


<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>

<body>
	<div class="container">
    	<h1 class="page-header">选项卡</h1>
        <ul class="nav nav-tabs">
        	<li class="active"><a href="#tab1" data-toggle="tab">选项卡1</a></li>
            <li><a href="#tab2" data-toggle="tab">选项卡2</a></li>
            <li><a href="#tab3" data-toggle="tab">选项卡3</a></li>
            <li><a href="#tab4" data-toggle="tab">选项卡4</a></li>
        </ul>
        <div class="tab-content">
        <div class="tab-pane active" id="tab1"><p>内容1</p></div>
        <div class="tab-pane" id="tab2"><p>内容2</p></div>
        <div class="tab-pane" id="tab3"><p>内容3</p></div>
        <div class="tab-pane" id="tab4"><p>内容4</p></div>
        </div>
    </div><!--container-->
   

</body>
</html>

好了，最后祝愿所有的朋友都能学业有成，少走弯路。