JQuery选项卡 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
       li{
           list-style: none;
       }
        .ul1{
            width: 340px;
            height: 30px;
        }
        .ul1 li{
            float: left;
            width: 100px;
            border: 1px solid #000;
            margin-right: 10px;
        }
       .ul1 li.active{
           background: #01afec;
           border: none;
           color: #fff;
       }
        .xxk{
            width: 340px;
            height: 340px;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
<ul class="ul1">
    <li class="active">标题一</li>
    <li>标题一</li>
    <li>标题一</li>
</ul>


<div>  <!--每个内容和标题的标签不能再同一级-->
    <div class="xxk">
        内容一
    </div>
    <div class="xxk" style="display: none">
        内容二
    </div>
    <div class="xxk" style="display: none">
        内容三
    </div>
</div>

<script>
    $('.ul1 li').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
        $('.xxk').eq($(this).index()).show().siblings().hide();
    })
</script>
</body>
</html>

posted on 2019-01-17 09:24  HelloWorld`  阅读(91)  评论(0)  编辑  收藏  举报

导航