bootstrap tab切换功能

EstherNi

已于 2023-04-18 17:05:04 修改

阅读量2.4k

点赞数 1

分类专栏： html-css-js 文章标签： html css javascript

于 2020-06-15 15:41:21 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/106763864

版权

html-css-js 专栏收录该内容

13 篇文章

订阅专栏

本文展示了一个使用Bootstrap实现的Tab切换效果示例，通过HTML、CSS和JavaScript代码，详细介绍了如何创建动态的标签页切换功能，适用于网站和Web应用的开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述

<!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>