基于Bootstrap的步骤引导html页面
美工设计了一个下一步下一步的引导效果界面，百度谷歌了很久没有找到合适的控件，就想着能不能借助Bootstrap的标签页修改下，实现后的效果如下。
实现思路是先PS三张小图片，作为步骤之间引导的箭头，如下。
然后bootstrap本身的tab 的li就设置背景色为对应的蓝色或者灰色。然后在写js方法，实现点击切换时候控制图片src和Li的背景即可。
将实现方法记录下来，希望对需要这方面需求的人有用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>流程</title> <link href="bootstrap/bootstrap.css" rel="stylesheet" />
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap/bootstrap.min.js"></script> <style> ul{
margin: 0;
padding: 0;
}
li{
margin: 0;
padding: 0;
} #myTab li{
width:25%;
float:left;
height:40px;
list-style: none;
margin: 0;
padding: 0;
} #myTab li img{
float:left;
height: 40px;
} #myTab li a{
color:white;
text-align: center;
position: relative;
display: block;
padding: 10px 15px;
} .blue{
background:#0f9af2;
}
.gray{
background: #dfdfdf;
}
.tabPaneUl{
width: 700px;
margin: 0 auto;
list-style: none;
} .tabPaneUl li{
height: 40px;
line-height: 40px;
}
.tab-pane{
margin-top: 50px;
}
</style> <script>
$(document).ready(function(){ }); //dom操作
var domFun={ }; //事件操作
var eventFun={
setStep:function(index){
for(var i=2;i<=index;i++){
$("#step"+i+"Li").addClass("blue").removeClass("gray");
$("#step"+i+"Img").attr("src","images/blue_blue.png");
}
for(var i=index+1;i<=4;i++){
$("#step"+i+"Li").addClass("gray").removeClass("blue");
$("#step"+i+"Img").attr("src","images/gray_gray.png");
}
$("#step"+(index+1)+"Img").attr("src","images/blue_gray.png");
}
};
</script>
</head> <body>
<div id="page-inner">
<div class="row" style="padding:10px;background: #bebebe">
<div class="col-md-12">
<div class="input-group" style="width: 60%; float: left;font-size: 20px;font-weight: bolder;">
创建会议
</div>
</div>
</div>
<div class="row" style="margin-top:30px">
<ul id="myTab" role="tablist">
<li id="step1Li" class="active blue">
<a href="#step1" onclick="eventFun.setStep(1)" role="tab" data-toggle="tab">
1.流程1
</a>
</li>
<li id="step2Li" class="gray">
<img id="step2Img" src="data:images/blue_gray.png"/>
<a href="#step2" onclick="eventFun.setStep(2)" role="tab" data-toggle="tab">
2.流程2
</a>
</li>
<li id="step3Li" class="gray">
<img id="step3Img" src="data:images/gray_gray.png"/>
<a href="#step3" onclick="eventFun.setStep(3)" role="tab" data-toggle="tab">
3.流程3
</a>
</li>
<li id="step4Li" class="gray">
<img id="step4Img" src="data:images/gray_gray.png"/>
<a href="#step4" onclick="eventFun.setStep(4)" role="tab" data-toggle="tab">
4.流程4
</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div id="step1" class="tab-pane fade active in">
1
</div>
<div id="step2" class="tab-pane fade">
2
</div>
<div id="step3" class="tab-pane fade">
3
</div>
<div id="step4" class="tab-pane fade">
4
</div>
</div>
</div>
</div>
</body>
</html>
CSDN免积分下载demo：
基于Bootstrap的步骤引导html页面的更多相关文章
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 基于BootStrap框架构建快速响应的GPS部标监控平台
最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...
- 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- 8个强大的基于Bootstrap的CSS框架
做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...
随机推荐
- Noip2013调试技巧
关于调试技巧,个人觉得还是很重要的,于是把自己之前写过的总结拿出来,修修补补再复习一下. F7 单步跟踪法 这是大家都最常用的调试方法,可以一步一步去跟踪程序的运行方向,以及各种变量的变化情况,当发现 ...
- linux下安装python3.3.4
下载安装包 # wget http://www.python.org/ftp/python/3.3.4/Python-3.3.4.tgz 解压 # tar -xzvf Python-3.3.4.tgz ...
- ios中的ＧＣＤ
前面我们说了block中提到它用于多线程,而gcd则是其用于多线程的典型.gcd其全称(Grand Central Dispatch) 那到底什么叫gcd,官方的解释如下: Grand Central ...
- iOS 设置状态栏的颜色
1.在plist文件中设置如下属性: 2.在delegate中设置 [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarSt ...
- Problem C Andy's First Dictionary（set的使用）
题目链接:Problem C 题意:输入一个文本,找出所有不同的单词,按照字典序从小到大输出,单词不区分大小写. 思路:将字母序列都存为小写,非字母的字符变成空格,然后利用stringstream实现 ...
- BZOJ 2752: [HAOI2012]高速公路(road)( 线段树 )
对于询问[L, R], 我们直接考虑每个p(L≤p≤R)的贡献,可以得到 然后化简一下得到 这样就可以很方便地用线段树, 维护一个p, p*vp, p*(p+1)*vp就可以了 ----------- ...
- USACO Seciton 5.4 Canada Tour(dp)
因为dp(i,j)=dp(j,i),所以令i>j. dp(i,j)=max(dp(k,j))+1(0<=k<i),若此时dp(i,j)=1则让dp(i,j)=0.(因为无法到达此状态 ...
- 模拟JQUERY的延迟方法绑定
模拟JQUERY的延迟方法绑定, 对于延迟方法绑定,各种语言都有不同的描述 什么回调啊,函数指针啊,委托啊,事件啊等,其实也就是那么大回事,不过用好这些特性,对于扩展和架构是非常有好处的, 好处自然就 ...
- c 语言 指针 与地址
1.如何实现交换两个数的值 void swap( int *a,int *b) { int tep=*a;//*a其实就是主函数a的值,a是主函数存a数值的地址. *a =*b; *b =tep; ...
- android screenOrientation
Activity: android:screenOrientation 横(landscape)竖(portrait)屏显示. 如果想让它一直是横屏显示的话,xml:android:screenOri ...