头像

简单的jQuery步骤流程图样式代码

来源:http://www.sucaihuo.com/js/3453 素材火管理员 2018-02-07 14:10浏览(44) 收藏

一款简单的jQuery步骤流程图样式代码,带箭头指示效果的分步流程图,点击步骤条变红色,完成步骤变绿色。
简单的jQuery步骤流程图样式代码
分类:其它特效 > 页面引导 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327,在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 1 下载资源 下载积分: 10 积分

js代码

<script type="text/javascript">
window.onload = function () {
	var lis = document.getElementById("list").getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {
		lis[i].setAttribute("index", i);
		lis[i].onclick = function () {
			$('#list i').attr("style", "background-color:");

			for (var i = 0; i < lis.length; i++) {
				if (this.getAttribute("index") == i) {
					lis[i].style.color = "#fff";
					lis[i].style.backgroundColor = "#f45438";
					 $(this).find('i').eq(0).attr("style", "background-color:#f45438");

					for (ii = 0; ii < i; ii++) {
						lis[ii].style.backgroundColor = "#1da02b";
					 $(lis[ii]).find('i').eq(0).attr("style", "background-color:#1da02b");
					}    
				} else {
					lis[i].style.color = "";
					lis[i].style.backgroundColor = "";
				}
			}
		}
	}
}
</script>
评论2
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 椅子
    02-08 23:25
    布丁
    高兴样式炫酷,下载试试看
  • 头像 沙发
    02-08 19:29
    qqlixiangabc
    样式还挺好看的啊。。。!!!
1 2