bootstrapV4.6.0实现标签页（改造v3.3.7）- 代码篇

最新推荐文章于 2021-02-18 18:22:42 发布

草巾冒小子

最新推荐文章于 2021-02-18 18:22:42 发布

阅读量423

点赞数

分类专栏： bootstrap踩坑篇

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/113564421

版权

bootstrap踩坑篇专栏收录该内容

14 篇文章 3 订阅

订阅专栏

文章目录

疑问 · 注意事项：

本案例中bootstrap.css.js使用的是4.6.0版本；
网上说4.0+版本的没有“标签页”，3.3.7版本的有“标签页”
1. 附：v3.3.7版本的（功能、样式）；
2. 自己也去看了官网文档，发现也没有标签页（估计网传是真的~），那就自己改造一个吧。
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）- 代码篇” 的全部内容。

草巾冒小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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效果。【
复制链接

扫一扫