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

相关推荐
Tzarevich10 小时前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端
掘金一周10 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统 | 掘金一周 10.23
前端·人工智能·后端
大杯咖啡10 小时前
前端常见的6种设计模式
前端·javascript
zyfts10 小时前
手把手教学用nodejs读写飞书在线表格
前端
www_stdio10 小时前
HTML5 敲击乐:模块化开发打造交互式钢琴应用的实践指南
html
泉城老铁11 小时前
vue实现前端excel的导出
前端·vue.js
用户516816614584111 小时前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js
咖啡の猫11 小时前
Vue收集表单数据
前端·javascript·vue.js
知识分享小能手11 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
林恒smileZAZ11 小时前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3