時間軸
時間軸效果
/* css代碼 */
@charset "UTF-8";
/** 通用 start **/
*{margin:0;padding:0;}
body{-webkit-tap-highlight-color:rgba(255,255,255,0);}/*屏蔽長按出現藍色背景*/
html{font-size:62.5%;}
html body{font:1.2rem "微軟雅黑";margin:0 auto;min-width:320px; background:#f0f0f0;}
em,i{font-style:normal; margin:0; padding:0;}
ul,li{list-style:none}
.title{width:100%;background-color: #fff;height:4rem;font-size: 2rem;line-height: 4rem;}
.my_menu_line{width:100%;height:1px;background-color: #e0e0e0;}
.order_process_list_yzp{width:100%;height:6rem;background-color: #fff;padding-top:1rem;}
.order_process_list_yzp li{float:left; width:20%;color:#858585; text-align:center; height:6rem; line-height:6rem; font-size:1.4rem;}
.icon_black_dian{position:relative; display:inline-block;border-radius:50%; background-color:grey;width:1.5rem; height:1.5rem; background-size:100%; left:42%; top:-1.5rem; margin-left:-1.4rem;z-index:1000;}
.icon_green_dian{position:relative; display:inline-block; border-radius:50%;background-color:green; width:1.5rem; height:1.5rem; background-size:100%; left:42%; top:-1.5rem; margin-left:-1.4rem;z-index:1000;}
.icon_red_dian{position:relative; display:inline-block; border-radius:50%;background-color:red; width:1.5rem; height:1.5rem; background-size:100%; left:42%; top:-1.5rem; margin-left:-1.4rem;z-index:1000;}
.icon_line_right{position:absolute; border-bottom:0.1rem solid #ccc; width:100%; right:0; top:6.2rem;}<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>時間軸</title>
<link rel="stylesheet" href="index.css">
<script src="jquery-1.9.1.js"></script>
</head>
<body>
<div class="title">訂單狀態</div>
<div class="my_menu_line"></div>
<ul class="order_process_list_yzp fix pt10 tb">
<li class="rel current"><em class="icon_black_dian"></em></em>待接單</li>
<li class="rel current"><em class="icon_black_dian"></em></em>已接單</li>
<li class="rel current"><em class="icon_black_dian"></em></em>待付款</li>
<li class="rel current"><em class="icon_black_dian"></em></em>待送回</li>
<li class="rel current"><em class="icon_black_dian"></em></em>已完成</li>
<em class="icon_line_right">
</ul>
</div>
<!-- 訂單狀態顯示 -->
<script>
$(document).ready(function() {
$('li').click(function() {
var liNum = $(this).index();
$("li:eq(" + liNum + ") em:first").addClass('icon_red_dian')
$("li:eq(" + liNum + ") em:first").removeClass('icon_black_dian')
$('li').each(function() {
var num = $(this).index();
if (num < liNum) {
console.log(liNum)
$("li:eq(" + num + ") em:first").addClass('icon_green_dian')
$("li:eq(" + num + ") em:first").removeClass('icon_red_dian')
}
else if(num > liNum){
$("li:eq(" + num + ") em:first").removeClass()
$("li:eq(" + num + ") em:first").addClass('icon_black_dian')
}
else if (liNum == 4) {
$("li:eq(" + num + ") em:first").addClass('icon_green_dian')
$("li:eq(" + num + ") em:first").removeClass('icon_red_dian')
}
})
})
});
</script>
</body>
</html>jQuery 事件(http://www.runoob.com/)
- $(document).ready() 方法允許我們在文檔完全加載完後執行函數。
- 當單擊元素時，發生 click 事件。click() 方法觸發 click 事件，或規定當發生 click 事件時運行的函數。(
$(selector).click(function))。 index() 方法返回指定元素相對於其他指定元素的 index 位置。這些元素可通過 jQuery 選擇器或 DOM 元素來指定。注意：如果未找到元素，index() 將返回 -1。
eg:獲得被點擊的
<li>元素相對於它的同級元素的 index：
$("li").click(function(){ alert($(this).index()); });jQuery :eq() 選擇器;
- :eq() 選擇器選取帶有指定 index 值的元素。
- index 值從 0 開始，所以第一個元素的 index 值是 0（不是 1）。
- 最常見的用法：與其他選擇器一起使用，選取指定組合中指定索引的元素。
jQuery :first 選擇器
- :first 選擇器選取第一個元素。
- 注意：這個選擇器只用於選取單個元素。使用 :first-child 選擇器選取多個元素（每個父元素一個）。
- 最常見的用法：與其他選擇器一起使用，選取指定組合中的第一個元素。
- 提示：如需選取指定組合中的最後一個元素，請使用 :last 選擇器。
jQuery addClass() 方法
- addClass() 方法向被選元素添加一個或多個類名。
- 該方法不會移除已存在的 class 屬性，僅僅添加一個或多個類名到 class 屬性。
- 提示：如需添加多個類，請使用空格分隔類名。
eg:向第一個
元素添加一個類名：
$("button").click(function(){
$("p:first").addClass("intro");
});jQuery removeClass() 方法
- removeClass() 方法從被選元素移除一個或多個類。
- 注意：如果沒有規定參數，則該方法將從被選元素中刪除所有類。
eg:從所有的
<p>元素移除 “intro” 類：
$("button").click(function(){
$("p").removeClass("intro");
});