<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>bootstrap tab切换</title>
<!--引入bootstrap样式文件-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--引入jq（必须在bootstrap.min.js文件之前）-->
<script type="application/javascript" src="js/jquery-3.4.1.min.js"></script>
<!--引入bootstrap js-->
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="margin: 60px">
<div class="tab-nav-main">
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a data-toggle="tab" href="#java">Java</a></li>
<li role="presentation"><a role="tab" href="#bootstrap">Bootstrap</a></li>
<li role="presentation"><a role="tab" data-toggle="tab" href="#javascript">Javascript</a></li>
<li role="presentation"><a role="tab" data-toggle="tab" href="#php">PHP</a></li>
</ul>
<div id="tab-content" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="java">
<p>Java是一种广泛使用的计算机编程语言，拥有跨平台、面向对象、泛型编程的特性，广泛应用于企业级Web应用开发和移动应用开发。</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="bootstrap">
<p>Bootstrap是一组用于网站和网络应用程序开发的开源前端（所谓“前端”，指的是展现给最终用户的界面。与之对应的“后端”是
在服务器上面运行的代码）框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="javascript">
<p>JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言[4]。它已经由ECMA
（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化[4]。它被世界上的绝大多数网站所使用，也被世界主流浏览器
（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一门基于原型、函数先行的语言[5]，是一门多范式的语言，
它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、
存储和图形等，但这些都可以由它的宿主环境提供支持。</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="php">
<p>
PHP（全称：PHP：Hypertext Preprocessor，即“PHP：超文本预处理器”）是一种开源的通用计算机脚本语言，尤其适用于
网络开发并可嵌入HTML中使用。PHP的语法借鉴吸收C语言、Java和Perl等流行计算机语言的特点，易于一般程序员学习。
PHP的主要目标是允许网络开发人员快速编写动态页面，但PHP也被用于其他很多领域。[1]
</p>
</div>
</div>
</div>
<!--第二个切换-->
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
<script>
$(function () {
$("#myTabs a:eq(1)").click(
function (e) {
e.preventDefault();
$(this).tab('show');
}
)
})
</script>
</body>
</html>
![]()
浙公网安备 33010602011771号