Bootstrap垂直Tab的简单实现

最新推荐文章于 2024-08-09 07:01:23 发布
最新推荐文章于 2024-08-09 07:01:23 发布
阅读量2.7k 收藏 4
点赞数 3
分类专栏： 前端 文章标签： Bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32530301/article/details/99951091
版权

Bootstrap垂直Tab的简单实现

背景

本人是后端(水平不怎么样), 由于项目需要开始着手写一点点前端, 因为需要一个Bootstrap的垂直tab页, 但是找来找去发现Bootstrap的组件只有水平的tab页, 因此只能自己动手实现一个简单的垂直tab页

需求

  1. 垂直显示
  2. 动态的进行tab切换, 无需进行路由跳转
  3. 利用Bootstrap的组件, 风格统一

看了一眼官网的组件列表, 发现列表组比较满足需求, 因此使用列表组来实现, 就是下面这个
在这里插入图片描述

效果

先看最终实现效果
在这里插入图片描述

思路

首先要做切换的效果我想到的是通过jQuery控制元素的隐藏和显示来实现, 在选中一个tab标签的时候, 将这个标签高亮并且显示出它所对应的tab页, 然后我就给每一个标签都手动绑定了一个点击事件, 没错手动绑定, 好在我的tab不算是很多, 即使是这样我也写了六个点击事件, 好在是实现了, 下面上代码

  • 第一版

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="row">
        <div class="list-group col-md-4 col-xs-4">
            <a id="tab1" href="#" class="tab list-group-item active">tab1</a>
            <a id="tab2" href="#" class="tab list-group-item">tab2</a>
            <a id="tab3" href="#" class="tab list-group-item">tab3</a>
            <a id="tab4" href="#" class="tab list-group-item">tab4</a>
            <a id="tab5" href="#" class="tab list-group-item">tab5</a>
            <a id="tab6" href="#" class="tab list-group-item">tab6</a>
        </div>
        <div class="col-md-8 col-xs-4">
            <div id="tab-item1" class="tab-item">
                tab1
            </div>
            <div id="tab-item2" class="tab-item">
                tab2
            </div>
            <div id="tab-item3" class="tab-item">
                tab3
            </div>
            <div id="tab-item4" class="tab-item">
                tab4
            </div>
            <div id="tab-item5" class="tab-item">
                tab5
            </div>
            <div id="tab-item6" class="tab-item">
                tab6
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $(".tab-item").hide();
            $("#tab-item1").show();
            $("#tab1").click(function () {
                $(".tab-item").hide();
                $(".tab").removeClass("active");
                $("#tab1").addClass("active");
                $("#tab-item1").show();
            });
            $("#tab2").click(function () {
                $(".tab-item").hide();
                $(".tab").removeClass("active");
                $("#tab2").addClass("active");
                $("#tab-item2").show();
            });
            $("#tab3").click(function () {
                $(".tab-item").hide();
                $(".tab").removeClass("active");
                $("#tab3").addClass("active");
                $("#tab-item3").show();
            });
            $("#tab4").click(function () {
                $(".tab-item").hide();
                $(".tab").removeClass("active");
                $("#tab4").addClass("active");
                $("#tab-item4").show();
            });
            $("#tab5").click(function () {
                $(".tab-item").hide();
                $(".tab").removeClass("active");
                $("#tab5").addClass("active");
                $("#tab-item5").show();
            })
            $("#tab6").click(function () {
                $(".tab-item").hide();
                $(".tab").removeClass("active");
                $("#tab6").addClass("active");
                $("#tab-item6").show();
            });
        });
    </script>
</body>

</html>

    到此位置效果是出来了…但是产品告诉我, 此时他要再加几个tab页!!! 这时候这种写法就让我的工作量变得很大了, 按照思路想下去我想到了循环遍历页面元素然后绑定事件的写法, 没错就是用forEach, 但是问题来了, 我的标签是a, 这个a标签啊, 实在是哪里都有, 这样遍历完了之后可能会把不该绑的地方也绑上点击事件, 这时候我咨询了前端小伙伴, 从而得知一个叫做事件委托的东西

    事件委托

    所谓委托, 顾名思义介绍把自己的事情交给别人去办嘛, 我们看一下现代汉语词典里面的定义哈
    在这里插入图片描述
    事件委托也就是说把自己(本元素)的事件交给别人(父级)去做

    好了, 对于这个需求了解这么多已经足够实现了(多了我也不会), 如需详细了解请诸君进行百度

    下面贴一个

    某大佬写的文章

    然后就产生了第二版

  • 第二版

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="row">
        <div id="tabs" class="list-group col-md-4 col-xs-4">
            <!--tab里面的值应与下面标签页的id一致-->
            <a tab="tab-item1" href="#" class="tab list-group-item active">tab1</a>
            <a tab="tab-item2" href="#" class="tab list-group-item">tab2</a>
            <a tab="tab-item3" href="#" class="tab list-group-item">tab3</a>
            <a tab="tab-item4" href="#" class="tab list-group-item">tab4</a>
            <a tab="tab-item5" href="#" class="tab list-group-item">tab5</a>
            <a tab="tab-item6" href="#" class="tab list-group-item">tab6</a>
        </div>
        <div class="col-md-8 col-xs-4">
            <!--id与上面标签里面的tab一致-->
            <div id="tab-item1" class="tab-item">
                tab1
            </div>
            <div id="tab-item2" class="tab-item">
                tab2
            </div>
            <div id="tab-item3" class="tab-item">
                tab3
            </div>
            <div id="tab-item4" class="tab-item">
                tab4
            </div>
            <div id="tab-item5" class="tab-item">
                tab5
            </div>
            <div id="tab-item6" class="tab-item">
                tab6
            </div>
        </div>
    </div>

    <script>
        //事件委托给父级div来处理
        $(document).ready(function () {
            $(".tab-item").hide();
            $("#tab-item1").show();
        });
        $(document).ready(function () {
            $("#tabs").on("click", "a", function (event) {
                let target = $(event.target);
                $(".tab-item").hide();
                $(".tab").removeClass("active");
                //添加css样式
                target.addClass("active");
                //取自定义字段里面的值(即a标签里面的tab字段)
                //tab字段里面存的是各个标签页的id, 以此来控制显示和隐藏
                $("#" + target.attr("tab")).show();
            });
        });
    </script>
</body>

</html>

最后

本人技术水平有限, 欢迎大家指出我的错误与不足# Bootstrap垂直Tab的简单实现

Weaker9527
关注
专栏目录
Bootstrap 5 导航
wjs2024的博客
07-26 332
Bootstrap 5 提供了一套完整的导航组件，包括导航栏（Navbar）、选项卡（Tabs）、胶囊（Pills）、面包屑（Breadcrumbs）和分页（Pagination）。这些组件设计用于创建直观且易于导航的用户界面。
简洁的bootstrap垂直tab选项卡
12-10
这是一款简洁的bootstrap垂直tab选项卡。该选项卡在bootstrap原有的选项卡插件的基础上，通过添加一些css样式，将它显示为垂直的选项卡。
关于在bootstrap中如何做垂直排列的tab切换效果
weixin_44302838的博客
10-23 1133
话不多说，先上效果图 如何实现这种列向的tab切换呢，我图片用的字体图标，随便自己 html代码 <div class="col-md-1"> <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"> <a href="#news01" data
垂直Tab布局
10-27
垂直Tab布局.这里有4个Tab选项 2013.10.27
探索创新：垂直TabLayout解决方案 - VerticalTabLayout
最新发布
gitblog_00125的博客
08-09 538
探索创新：垂直TabLayout解决方案 - VerticalTabLayout VerticalTabLayout垂直纵向的TabLayout、轻松创建纵向导航项目地址:https://gitcode.com/gh_mirrors/ve/VerticalTabLayout 在移动应用设计中，TabLayout是一种常用的设计元素，用于在多个视图之间切换。然而，传统的TabLayout大多是水平...
纯CSS3垂直Tab菜单 Tab样式可自定义
08-23
Tab菜单在网页上使用起来非常方便，也比较节省空间，所以很多门户网站很喜欢用Tab菜单。今天我们要来分享一款垂直方向的Tab菜单，它是用纯CSS3实现的，加载和切换特别灵活。另外，Tab菜单的样式你可以使用CSS重新定义，扩展很方便。
bootstrap 多层tab标签实现
01-01
本篇文章将深入探讨如何在Bootstrap中实现多层Tab标签。 一、基本Tab组件 首先，我们需要了解Bootstrap中的基本Tab组件是如何工作的。一个简单的Tab导航由两部分组成：导航链接（`<ul class="nav nav-tabs">`）和...
bootstrap tab.zip_bootstrap tab_bootstrap tab_bootstrap 多tab_bo
09-15
Bootstrap的JavaScript插件（通常通过引入`bootstrap.js`或`bootstrap.min.js`实现）负责处理选项卡的切换。点击选项卡时，对应的面板将被展示，其他面板则隐藏。 5. **自定义样式**： 压缩包中的CSS文件（可能...
jQuery Bootstrap垂直手风琴列表切换代码
06-09
本文将深入探讨“jQuery Bootstrap垂直手风琴列表切换代码”这一主题，帮助开发者理解如何利用这两个工具创建功能丰富的网页元素。 首先，我们要明白jQuery是一个JavaScript库，它提供了丰富的API和插件，使得DOM...
Bootstrap垂直手风琴动画切换特效
06-10
在这个“Bootstrap垂直手风琴动画切换特效”中，我们主要探讨如何利用Bootstrap的Accordion组件和CSS3技术来创建一种吸引用户的交互体验。 Bootstrap的Accordion组件是一个折叠内容的容器，通常用于节省页面空间并...
BootStrap实现左侧或右侧竖式tab选项卡
江西师范大学-20届-吴悠
12-21 1万+
BootStrap实现左侧或右侧竖式tab选项卡 代码如下： &lt;div style="height: 100px;"&gt; &lt;div class="col-xs-2"&gt; &lt;ul class="nav nav-tab vertical-tab" role="tablist" id="vtab"&gt;
Bootstrap的步骤进度条
12-06
Bootstrap的步骤进度条Bootstrap的步骤进度条Bootstrap的步骤进度条
bootstrap步骤条-按钮-箭头样式
12-13
一款基于Bootstrap的纯CSS3步骤条-箭头指向类按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。
推荐项目：VerticalTabLayout - 翻转传统的Tab布局
gitblog_00054的博客
03-26 506
推荐项目：VerticalTabLayout - 翻转传统的Tab布局 VerticalTabLayout垂直纵向的TabLayout、轻松创建纵向导航项目地址:https://gitcode.com/gh_mirrors/ve/VerticalTabLayout 项目简介 是一个开源的Android库，由开发者@qstumn创建。这个库引入了一种创新的方式，将传统的水平滑动标签（Tab）转换为...
bootstrap-左侧垂直标签页的完成
weixin_42545122的博客
11-12 765
bootstrap-左侧垂直标签页 实现方法： 1.利用栅格系统分为左侧边栏与中间内容显示 2.利用Collapse做出展开折叠效果（list-group） 3.在list-group中加入标签页，实现内容的转换 <style> a{ text-align: center; } /*侧边栏标签*/ #sidebar .sidebar_lab{ ...
bootstrap里三种表单布局的方式
一个无聊的前端写点无聊的东西
05-05 1339
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单 创建垂直表单： <!DOCTYPE html> <html> <head> <title>表单</title> <meta charset="utf-8"> <meta name="viewport" content="width...
垂直型Tab切换效果
Enya61的博客
04-28 398
【代码】垂直型Tab切换效果。
bootstrap的tabs标签页：实现a页面指定的tab，点击more，跳去b页面指定的tab
热门推荐
电鳗的博客
05-16 1万+
如图。 实现目标： a页面的tab1标签页中点击more 跳去b页面的tab1 这里为什么是more跳过去的呢，因为tab nav上面的tab1，tab2，tab3，是用来对应自己在同个页面的标签页的。 使用框架： bootstrap的v3版本的tabs标签页
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值