ul li 横向布局 ，点击li显示对应的内容

效果图

 

 

代码：

html 部分 

<ul class="test">
    <li>
        工作量
    </li>
    <li>
        满意分
    </li>
    <li>
        质检分
    </li>
</ul>

<div>
    <ul class="box">
        <li class="con0">
　　　　　　000

</li>
<li class="con1">
1111

</li>

<li class="con2">

css 部分：

.test ul {
    list-style: none;
}

.test li {
    /*display: none;*/
    float: left;
    font-weight: 800;
    font-style: normal;
    font-size: 14px;
    display: block; /* 将链接设为块级元素 */
    width: 75px; /* 设置宽度 */
    height: 30px; /* 设置高度 */
    line-height: 22px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
    text-align: center; /* 居中对齐文字 */
    color: rgba(0, 0, 0, 0.647058823529412);
    text-decoration: none; /* 去掉下划线 */
}
.box li {
    margin-top: 50px;
    width: 100%;
    display: none;
}

.box .con0 {
    display: block;
}

script 部分：

<script type="text/javascript">
    $(".test li").mouseover(function () {
        this.style.color = '#1890FF';

    });
    $(".test li").mouseleave(function () {
        this.style.color = 'rgba(0, 0, 0, 0.647058823529412)';
        this.style.borderbottom = '1px solid #1890FF';
    });

    $(document).ready(function () {
        $(".test li").click(function () {
            var order = $(".test li").index(this);//获取点击之后返回当前a标签index的值
            $(".con" + order).show().siblings("li").hide();//显示class中con加上返回值所对应的DIV
        });
    })
</script>