美工设计了一个下一步下一步的引导效果界面，百度谷歌了很久没有找到合适的控件，就想着能不能借助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页面的更多相关文章

  1. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  2. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  3. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  4. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  5. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  6. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  7. Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  8. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  9. 8个强大的基于Bootstrap的CSS框架

    做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...

随机推荐

  1. windows 下面的内存泄漏排查.

    内存泄漏排查 一下本人只是简单的介绍一个实用, 如果读者很感兴趣, 可以查阅msdn自己去深入调查相关的API和原理. API 介绍 1. 马上打印泄漏信息:_CrtDumpMemoryLeaks() ...

  2. MyGui 3.2.0(OpenGL平台)的编译

    MyGui是一个用来创建用户图形界面的库,用于游戏和3D应用程序.这个库的主要目标是达到:快速.灵活.易用. 1.下载准备: 源代码:http://svn.code.sf.net/p/my-gui/c ...

  3. CCTableView 简单样例

    非常像android中的listview #pragma once; #include "cocos2d.h" using namespace cocos2d; //使用CCTab ...

  4. 如何解决Android 5.0中出现的警告：Service Intent must be explicit

    有些时候我们使用Service的时需要采用隐私启动的方式,但是Android 5.0一出来后,其中有个特性就是Service Intent  must be explitict,也就是说从Lollip ...

  5. ！！！易控INSPEC组态软件开发小结——-一次工程文件损坏和处理经过

    从加入红橡开始熟悉和使用易控(INSPEC)组态软件,值得赞扬的是INSPEC的开放性和对C#语言的支持,除此之外,便也没有感觉它与其他组态软件有太多优势,有人说INSPEC软件授权比国内其他同类的组 ...

  6. ViewState是什么

    在做ASP.NET的时候遇到ViewState,当时不知道他是什么意思. 就在当前页面中保存数据的. 像session.是会话级别的.只要会话没有过期.session中存的数据就在. viewstat ...

  7. bootstrap table笔记

    获取选中行:$table.bootstrapTable('getSelections');

  8. 【C++】基于socket的多线程聊天室（控制台版）

    以前学习socket网络编程和多线程编程的时候写的一个练手程序 聊天室基本功能: 1.用户管理:登录,注册,登出,修改用户名,修改密码 2.聊天室功能:群聊,私聊,获取在线用户列表,获取所有用户列表 ...

  9. hdu 1251 统计难题（trie 树的简单应用）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1251 题意:给你多个字符串,求以某个字符串为前缀的字符串数量. 思路:简单的trie数应用,在trie ...

  10. win7 64位 Xsheel

    Xsheel5安装后,找不到.dll文件,系统支持不好,不用 Xshell4有时提示 1152:Error 就使用 链接:http://pan.baidu.com/s/1c1s42Y0 密码:098x ...