jq简单实现选项卡--tab

Html代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>选项卡</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
    *{
        padding: 0;
        margin:0;
    }
    .content {
        padding:100px;    
        
    }
    .ct-ul {
        list-style: none;
        display: flex;
        margin-bottom: 0;
        

    }
    .ct-ul li {
        padding: 5px 10px;
        margin-right: -1px;
        border: solid 1px #ccc;
        border-bottom: none;
        cursor: pointer;

    }

    .ct-list {
        border: solid 1px #ccc;
        margin-top: -1px;
        min-height: 100px;
    }
    .one {
        background-color: #fff;
        
    }

</style>


</head>
<body>
    <div class="content">
        <ul class="ct-ul">
            <li class="ct-li one">选项一</li>
            <li class="ct-li">选项二</li>
            <li class="ct-li">选项三</li>
            <li class="ct-li">选项四</li>
        </ul>
        <div class="ct-list">
            <div class="item">选项一内容</div>
            <div class="item">选项二内容</div>
            <div class="item">选项三内容</div>
            <div class="item">选项四内容</div>
        </div>

    </div>
</body>
</html>
View Code

Jquery代码如下

<script src="js/jquery-1.10.2.js"></script>
<script>
    $(function(){
        $(".item:gt(0)").hide();//选择item类0之后的元素隐藏,为0的这个元素显示

        //主要逻辑就在于找到选项卡和内容框相对应的下标
        $(".ct-li").unbind('click').click(function(){
            var _index = $(this).index();//获取点击元素的下标
            $(this).addClass("one") //给点击的元素添加类
            .siblings().removeClass();//相邻元素隐藏类
            $(".item").eq(_index).show()
                .siblings().hide();//选择item元素中第_index个显示出来，相邻元素被隐藏
        })

    })
</script>
View Code

 效果图如下

 

posted @ 2018-03-19 17:37  有点甜Sweet  阅读(3658)  评论(1)  编辑  收藏  举报