时间轴实现

最新推荐文章于 2024-06-27 17:05:17 发布

旧麋鹿

最新推荐文章于 2024-06-27 17:05:17 发布

阅读量944

点赞数

文章标签： html 时间轴

本文链接：https://blog.csdn.net/qq_38225873/article/details/82942410

版权

前台代码

            <div class="container" style="margin-top: 65px;">
                <ul class="time-horizontal">
                    <li><a class="button" href="javascript:;"><b></b>四月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>五月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>六月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>七月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>八月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>九月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>十月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>十一月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>十二月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>一月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>二月</a></li>
                    <li><a class="button" href="javascript:;"><b></b>三月</a></li>
                </ul>
            </div>
            <div class="parent">
                <div>
                    <p>四月</p>
                </div>
                <div>
                    <p>五月</p>
                </div>
                <div>
                    <p>六月</p>
                </div>
                <div>
                    <p>七月</p>
                </div>
                <div>
                    <p>八月</p>
                </div>
                <div>
                    <p>九月</p>
                </div>
                <div>
                    <p>十月</p>
                </div>
                <div>
                    <p>十一月</p>
                </div>
                <div>
                    <p>十二月</p>
                </div>
                <div>
                    <p>一月</p>
                </div>
                <div>
                    <p>二月</p>
                </div>
                <div>
                    <p>三月</p>
                </div>
            </div>

js：

    <script type="text/javascript">
        $('.button').each(function (i) {
            this.onclick = function () {
                console.log(i);
                $(".parent div").eq(i).show().siblings().hide();              
            };
        })
    </script>

css：

/*时间轴样式*/
.time-horizontal {
    list-style-type: none;
    border-top: 2px solid #808080;
    max-width: 95%;
    padding: 0px;
    margin: 0px;
}

    .time-horizontal li {
        float: left;
        position: relative;
        text-align: center;
        width: 8%;
        padding-top: 10px;
    }

        .time-horizontal li b:before {
            content: '';
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 5px solid #ff982a;
            border-radius: 10px;
            background: #ff982a;
        }

.parent div {
    display: none;
    margin-left:30px;
}
    .parent div p {
        font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
        font-size: 14px;
    }
.button {
    text-decoration: none;
}

.button {
    font-size: 16px
}

    .button:link {
        color: #000000;
        text-decoration: none;
    }

    .button:active {
        color: red;
    }

    .button:visited {
        color: purple;
        text-decoration: none;
    }

    .button:hover {
        color: red;
        text-decoration: none;
    }