bootstrap tab切换功能
<!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>