简单时间轴_简单时间轴代码-CSDN博客

本文链接：https://blog.csdn.net/yzp0112/article/details/53142724

时间轴

时间轴效果
这里写图片描述

/* 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"); });