Bootstrap的步骤引导html页面样式_下一步样式资源-CSDN文库

共7个文件

png：3个

js：2个

html：1个

3星 · 超过75%的资源需积分: 48 200 浏览量 2018-09-14 10:38:53 上传评论 2 收藏 108KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

BootstrapStep.zip （7个子文件）

Bootstrap

bootstrap

bootstrap.min.js 28KB

bootstrap.css 124KB

index.html 3KB

images

blue_gray.png 550B

blue_blue.png 487B

gray_gray.png 498B

jquery-1.10.2.js 286KB

<!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="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="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="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>

评论收藏

内容反馈