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