Bootstrap插件（三）——标签页导航（tab.js）

最新推荐文章于 2025-05-31 12:07:01 发布

边城月

最新推荐文章于 2025-05-31 12:07:01 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： front-end(bootstrap) 文章标签： tab.js bootstrap学习标签页导航响应式插件

本文链接：https://blog.youkuaiyun.com/qq_28057577/article/details/77985341

这篇博客详细介绍了如何使用Bootstrap的tab.js实现标签页导航的动态效果。通过一个代码示例，展示了如何设置data-toggle属性、href绑定以及添加JavaScript代码实现内容的联动切换。内容包括Java、Bootstrap、JavaScript和PHP四个标签页，点击不同标签，对应内容会展示和隐藏，实现无缝切换。

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

之前讲组件的时候有讲到tab普通式和胶囊式标签页，但是都只是讲解一些静态的布局，并没有加入动态的交互效果，这一篇文章将根据一个代码示例来学习，标签导航与所对应内容的联动。想来看一下具体实现的动态效果：

效果就像上面，当点击tab选项的时候切换对应的内容，下面是实现的代码:

 
    
  
 
       
 
        
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组件</title>
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    <!--引入bootstrap js-->
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        p{
           
           
            padding: 10px;
        }
    </style>
    <script>
        $(function(){
           
           
            $("#myTabs a:eq(1)").click(
             function(e){
           
           