bootstrap:选项卡功能DEMO

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<link rel="stylesheet" type="text/css" href="/cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"  />
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
	<li class="active"><a href="#section1">Section1</a></li>
	<li ><a href="#section2">Section2</a></li>
	<li ><a href="#section3">Section3</a></li>
</ul>
<div class="tab-content">
	<div id="section1" class="tab-pane in active">
		<h2>section1</h2>
		<p>...</p>
	</div>
	<div id="section2" class="tab-pane">
		<h2>Section2</h2>
		<p>...</p>
	</div>
	<div id="section3" class="tab-pane">
		<h2>Section3</h2>
		<p>...</p>
	</div>
</div>

<!-- 基础的Jquery -->
<script type="text/javascript" src="/cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
<!-- 基础的bootstrap -->
<script type="text/javascript" src="/cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js" ></script>
<script type="text/javascript">
	$(function(){
		var hash = window.location.hash;
		hash && $('ul.nav a[href="'+hash+'"]').tab('show');
		$("#myTab a").click(function(e){
			$(this).tab('show');
		});
	});
</script>
</body>
</html>

效果图:

bootstrap和jQuery下载地址:

https://download.csdn.net/download/Bof_jangle/88614214

相关推荐
世界哪有真情2 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界3 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi8 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑10 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia18 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子21 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。22 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia24 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
nc_kai25 分钟前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
Rubin9326 分钟前
浏览器一帧做些什么?
html