制作一个小型tap栏

效果图

 

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
        *{
            margin: 0;padding: 0;
            list-style: none;
        }
        .a{
            width: 150px;
            height: 30px;

        }
        .a li{
            float: left;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .a li:nth-of-type(1){
            background-color: red;
        }
        .a li:nth-of-type(2){
            background-color: blue;
        }
        .a li:nth-of-type(3){
            background-color: yellow;
        }
        .b{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .b li{
            width: 300px;
            height: 300px;
            position: absolute;
        }
        .b li:nth-of-type(1){
            background-color: pink;
            z-index: 1;
        }
        .b li:nth-of-type(2){
            background-color: skyblue;
        }
        .b li:nth-of-type(3){
            background-color: green;
        }
    </style>
</head>
<body>
<ul class="a">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul class="b">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<script>
    // $('.a>li:eq(0)').click(function(){
    //     $('.b>li:eq(0)').show().siblings().hide();
    // });
    // $('.a>li:eq(1)').click(function(){
    //     $('.b>li:eq(1)').show().siblings().hide();
    // });
    // $('.a>li:eq(2)').click(function(){
    //     $('.b>li:eq(2)').show().siblings().hide();
    // });


　　// 由以上代码推理得出，可以获取当前点击li的索引传给下面的ul的li，使之对应起来即可完成效果
    $(function(){
        $('.a>li').click(function(){
            // 获取当前点击的索引
            var Index = $(this).index();

            // 将索引添加给下面
            $('.b>li:eq('+ Index +')').show().siblings().hide();
        });
    });
</script>
</body>
</html>

 

posted @ 2017-10-09 08:38  曦阳~  阅读(506)  评论(0)    收藏  举报