jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)
之前做出的步骤条是利用easyui +jquery实现的,但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效,所以换了一种方式,用Position。把元素脱离文档流移出视觉区域,添加该属性后既不会影响布局,又能让元素保持可以操作。应用该属性后,主要就是通过控制方向(top,left,right,bottom),达到一定的值,离开当前可是页面。
先看效果图:
代码展示:
页面html:
这是基本信息板块
这是教育背景板块
这是工作经历板块
工作地点
工作内容
这是社交板块
上一步
下一步
js代码展示:
$(document).ready(function(){
$("#education").addClass('main-hide');
$("#work").addClass('main-hide');
$("#social").addClass('main-hide');
$('#previous_step').hide();
/*上一步*/
$('#previous_step').bind('click', function () {
index--;
ControlContent(index);
});
/*下一步*/
$('#next_step').bind('click', function () {
index++;
ControlContent(index);
});
});
var index=0;
function ControlContent(index) {
var stepContents = ["basicInfo","education","work","social"];
var key;//数组中元素的索引值
for (key in stepContents) {
var stepContent = stepContents[key];//获得元素的值
if (key == index) {
if(stepContent=='basicInfo'){
$('#previous_step').hide();
}else{
$('#previous_step').show();
}
if(stepContent=='social'){
$('#next_step').hide();
}else{
$('#next_step').show();
}
$('#'+stepContent).removeClass('main-hide');
$('#point'+key).addClass('c-select');
$('#line'+key).removeClass('b-select');
}else {
$('#'+stepContent).addClass('main-hide');
if(key>index){
$('#point'+key).removeClass('c-select');
$('#line'+key).removeClass('b-select');
}else if(key
$('#point'+key).addClass('c-select');
$('#line'+key).addClass('b-select');
}
}
}
}
css样式
.processBar{
float: left;
width: 200px;
margin-top: 15px;
}
.processBar .bar{
background: rgb(230, 224, 236);
height: 3px;
position: relative;
width: 185px;
margin-left: 10px;
}
.processBar .b-select{
background: rgb(96, 72, 124);
}
.processBar .bar .c-step{
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(230, 224, 236);
left: -12px;
top: 50%;
margin-top: -4px;
}
.processBar .bar .c-select{
width: 10px;
height: 10px;
margin: -5px -1px;
background:rgb(96, 72, 124);
}
.main-hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.poetry{
color: rgb(96, 72, 124);
font-family: KaiTi_GB2312, KaiTi, STKaiti;
font-size: 16px;
background-color: transparent;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
button{
width: 80px;
line-height: 30px;
font-size: 11px;
color: rgb(116, 42, 149);
text-align: center;
border-radius: 6px;
border: 1px solid #e2e2e2;
cursor: pointer;
background-color: #fff;
outline:none;
}
button:hover{
border: 1px solid rgb(179, 161, 200);
}
jq步骤条 java_JQuery实现步骤条效果(上一步,下一步)相关推荐
- steps步骤条+上一步+下一步
步骤条在第一步提现申请的时候,只显示下一步.在第二步提现确认的时候,显示上一步和下一步.第三步完成提现的时候显示确认按钮. <span :class="{active:prevStep ...
- 2022-02-22:机器人大冒险。 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0)。小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动。指令有两种
2022-02-22:机器人大冒险. 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0).小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动.指令有两种 ...
- html数字显示百分比,扣丁学堂html5 教程之Canvas实现圆形进度条并显示数字百分比效果...
今天扣丁学堂html5培训小编和大家分享一下Canvas实现圆形进度条并显示数字百分比效果示例,对html5感兴趣的小伙伴或者是参加学习的小伙伴可以了解一下. Canvas实现圆形进度条并显示数字百分 ...
- android发光进度条,Android ProgressBar 进度条荧光效果
这段时间做项目,产品需求,进度条要做一个荧光效果,类似于Android4.0 浏览器中进度条那种样子.刚开始,百思不得其姐啊,还以为是用sharp文件或者canvas直接画出来的.后来一怒之下,把系统 ...
- bootstrap 滚动 进度条_bootstrap动态进度条怎么搞
在本教程中,您将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前 ...
- Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能 前言 我在之前的博客里介绍过关于VideoPlayer的简单使用流程,之前一直想研究下videoPlayer中的使用进度条控制视频 ...
- bat如何执行完上一条命令_一条更新语句是如何执行的?
一条更新语句是如何执行的? 之前你可能经常听DBA同事说,MySQL可以恢复到半个月内任意一秒的状态,惊叹的同时,你是不是心中也会不免会好奇,这是怎样做到的呢? 这个需要从一个表,一条更新语句说起. ...
- Oracle排序后获取第一条和最后一条值
需求:查询一天中第一条和最后一条数据 原始表 select * from table1 ; 步骤1:使用row_number() over() 函数对时间排序,一个正序,一个倒序. select t. ...
- MYSQL 单表一对多查询,将多条记录合并成一条记录
MYSQL 单表一对多查询,将多条记录合并成一条记录 一.描述: 在MySQL 5.6环境下,应工作需求:将一个表中多条某个相同字段的其他字段合并(不太会表达,有点绕,直接上图) 想要达到的效果: 实 ...
最新文章
- java 静态代码块 多线程,Java多线程编程笔记10:单例模式
- 转 让开发自动化: 使用自动化加速部署
- BCH区块链上的预言机项目——Oracles
- PLSQL DEVELOPER 使用技巧
- pythonopencv提取圆内图像_python – 使用OpenCV从图像中提取多边形给定...
- 如何在Qt中使用自定义数据类型
- leetcode题解191-位1的个数
- Oracle中无法解析TNS的陷阱
- 今天要查一下,如果没有密保手机的号码在使用,怎么更换qq的密保手机
- 关于用Java写的贪吃蛇游戏的一些感想
- 趋势科技称 Apex One EDR 平台的两个0day已遭在野利用
- Flutter学习 — 实现滑动关闭、删除item
- docker导入导出
- php 怎么更新浏览器缓存文件在哪里,PHP 设置动态网页在浏览器的缓存
- shell间接变量引用两种方式
- windows WTS 服务与桌面交互
- 【C++】(一)C++入门第一课
- java基础练习—逢七游戏、不死神兔、百钱百鸡、利滚利
- 在CMD命令行中切换到管理员权限模式
- java的(PO,VO,TO,BO,DAO,POJO)类名包名解释