【033】Bootstrap实现标签页效果

版本

Bootstrap v3.3.6
jQuery v1.11.3

实现方法

给显示标签页内容的DIV分别设置上ID： tab_1 和 tab_2。在标签页按钮上的 href 属性设置 #tab_1 和 #tab_2 来控制标签页内容的显示。具体代码如下：

tab.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><link href="bootstrap.css" rel="stylesheet" type="text/css"/><style>.main{top: 0;left: 0;width: 600px;height: auto;/*display、margin-right和margin-left这三行代码使得DIV居中*/display: block;MARGIN-RIGHT: auto;MARGIN-LEFT: auto;padding-top:20px;}</style>
</head>
<body>
<div class="main"><!-- begin 导航条 --><ul class="nav nav-tabs"><li class="active"><a href="#tab_1" data-toggle="tab" class="tab-default"> 计算机名 </a></li><li><a href="#tab_2" data-toggle="tab"> 硬件 </a></li></ul><!-- end 导航条 --><!-- begin 导航条下方的内容 --><div class="tab-content"><div class="tab-pane active" id="tab_1">Windows使用以下信息在网络中标识这台计算机</div><div class="tab-pane fade" id="tab_2">设备管理器</div></div><!-- end   导航条下方的内容 --><!-- begin 引入依赖的JS文件 --><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="bootstrap.js"></script><!-- end   引入依赖的JS文件 -->
</div>
</body>
</html>

最后给一个jQuery v1.11.3下载地址

【033】Bootstrap实现标签页效果相关推荐

JS实现标签页效果(配合css)不同标签下对应不同div
显示页面tab.jsp <%@ page language = "java" import = "java.util.*" pageEnc ...
用css和jquery实现标签页效果（一）
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: <style type="text/css ...
【Axure交互教程】可滑动的标签页效果
作品名称:可滑动的标签页效果作品编号:Case002 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case00 ...
BootStrap之标签页切换
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码 fade in效果函数介绍前提条件 ...
css3和jQuery实现一个简单的标签页效果
主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果, css代码如下: body{width: 600px;margin: 100px au ...
bootstrap.addtabs 标签页
QiYuAdmin-bootstrap.addtabs美化(SpringBoot实战) 2017年04月10日 19:07:19 阅读数:2154 简介之前发现了一个插件bootstrap-addt ...
（4）bootstrap标签页
导读: 我希望实现的功能:点击导航栏下的某一选项,在固定区域呈现我需要的页面. 如图:点击1,在右侧出现2页面 (1)所用到的技术:bootstrap的标签页依然老样子,先给出官方文档链接 http ...
WPF自适应可关闭的TabControl 类似浏览器的标签页
原文:WPF自适应可关闭的TabControl 类似浏览器的标签页效果如图: 虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem. 大 ...
bootstrap在一个tab页调用另一个tab页的方法
在我们开发过程中使用bootstrap框架的时候,会经常使用bootstrap的标签页,如果我们在tab子页面中操作的数据,需要在父tab里改变状态到时候,并且不关闭当前子tab页,父tab页只是局部 ...

【033】Bootstrap实现标签页效果

【033】Bootstrap实现标签页效果相关推荐

最新文章

热门文章