bootstrap tab切换功能

效果:
bootstrap tab切换功能_第1张图片

<!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是一组用于网站和网络应用程序开发的开源前端(所谓“前端”,指的是展现给最终用户的界面。与之对应的“后端”是                  
             在服务器上面运行的代码)框架,包括HTMLCSS及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>

你可能感兴趣的:(html-css-js,html,css,javascript)