bootstrapV4.6.0实现标签页(改造v3.3.7)- 代码篇
文章目录
- 疑问 · 注意事项:
- 效果图:
- 全部代码示下:
疑问 · 注意事项:
- 本案例中bootstrap.css.js使用的是4.6.0版本;
- 网上说4.0+版本的没有“标签页”,3.3.7版本的有“标签页”
- 附:v3.3.7版本的(功能、样式);
- 自己也去看了官网文档,发现也没有标签页(估计网传是真的~),那就自己改造一个吧。
- 4.6.0版本的css源码中,没有v3.3.7那样的标签页样式供大家使用。
【具体源码有待考究,本文不再赘述。】 - 除了通过click触发效果,也可以改为hover效果。
【具体不赘述,各自改造吧】
效果图:
全部代码示下:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="statics/plugin/bt4.6.0/css/bootstrap.min.css"/><title></title>
</head>
<body style="width: 500px;margin: 100px auto;">
<div class=""><ul id="myTabs" class="nav nav-pills" role="tablist"><li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">家</a></li><li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">个人资料</a></li><li role="presentation" class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">【落下】</a><ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"><li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@脂肪</a></li><li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li></ul></li></ul><div id="" class="tab-content"><div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">我是内容111</div><div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">我是内容222</div><div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">我是内容333-1</div><div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">我是内容333-2</div></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
$(function(){//$('#myTab a.first').tab('show');//【初始化默认显示的tab】$('#myTabs a').click(function (e) { //【hover】console.log(e)e.preventDefault()$(this).tab('show');//$(this).tab('show').stop();//【hover弃用】});
});
</script>
</body>
</html>
以上就是关于“bootstrapV4.6.0实现标签页(改造v3.3.7)- 代码篇” 的全部内容。
bootstrapV4.6.0实现标签页(改造v3.3.7)- 代码篇相关推荐
- 浏览器标签页形式运行【js代码】,小书签
问题: 点击浏览器的书签,运行了一段代码. 方法: 一.打开浏览器(以google浏览器为例) 打开浏览器空白页 二.点击"为此页添加标签",重命名并点击"完成" ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- BootStrap之标签页切换
标签页切换 标签页切换 标签页插件 第一个官方例子 调用tab("show")显示tab-pane中的内容 第一个例子的HTML+CSS代码 fade in效果 函数介绍 前提条件 ...
- JavaScript面向对象怎样删除标签页?
单击小标签右上角的按钮可D头删除标签页.其开发思路是,为"x"元素绑定单击事件,事件触发后,通过父元素1i获取索弓引值,然后用这个索引值将对应的li和section删除,并在删除后 ...
- 解决Chrome浏览器打开新标签页,显示“无法访问此网站 连接已重置”的问题【在54.0 beta版上测试通过】
1. 问题描述 在浏览器中打开新标签页,无法正常进入带搜索框的新标签页,而是出现错误:无法访问此网站 连接已重置. 2. 解决办法 按照这篇博客的做法(http://www.cnblogs.com/c ...
- 20_[nvim0.5+从0单排]_lsp状态栏(lualine)标签页(bufferline)美化
视频与目录 项目 值 教程目录 https://blog.csdn.net/lxyoucan/article/details/120641546 B站视频 暂无 20_[nvim0.5+从0单排]_l ...
- chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题
个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...
- vue 自定义标签页
本篇文章我们通过以前学习过的知识来构建一个自己的标签页组件. 首先我们创建一个基于vue的项目,我用的IDE是webstorm. 创建好的工程目录结构: 我们先来分析一下我们需要做哪些工作,常见的标签 ...
- 【033】Bootstrap实现标签页效果
版本 Bootstrap v3.3.6 jQuery v1.11.3 实现方法 给显示标签页内容的DIV分别设置上ID: tab_1 和 tab_2.在标签页按钮上的 href 属性设置 #tab_1 ...
最新文章
- 3rd_party/flatbuffers/tmp/flatc: No such file or directory
- mysql 用命令行复制表数据到新表
- python 自学需要多久-怎么自学python,大概要多久?
- 在Django中使用PostgreSQL数据库
- Java跨平台实现原理及JVM垃圾回收、内存管理实战
- Sublime Text3 如何安装、删除及更新插件
- HD 2048 数塔 DP(简单递推)
- 3月30日作业:采购管理、信息管理和配置管理
- 安装-consul服务发现集群
- Directory /opt/jfrog/artifactory/var has bad permissions for user id 1030
- [免费]开源制衣公司网站源程序 (三)!
- 不同浏览器input file样式不一样
- php用高德地图api坐标返回市_php百度坐标转高德坐标(示例代码)
- VS2015 输出目录、中间目录、目标文件名、工作目录
- SWUST OJ533你的QQ多少级了?
- 机器学习—决策树模型
- 在后台处理请求返回的json字符串
- 洗扑克牌(乱数排列)(c/python略)
- 【有利可图网】双十一“亮眼”设计大赏来了!!
- vue:hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js