jQ选项卡

最新推荐文章于 2022-11-14 15:31:33 发布

张张张96

最新推荐文章于 2022-11-14 15:31:33 发布

阅读量416

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/Girl_0919/article/details/73431090

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQ选项卡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;display: block;}
        .clearfix:after{height:0;display: block;clear: both;content: "";}
        .type{width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;}
        .type ul li{width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;}
        .show{display:block !important;}
        .active{background: red!important;}
        .content{width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;}
        .content p{display: none;height:400px;line-height: 400px;text-align: center;}
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div class="type">
    <ul class="clearfix">
        <li class="active">新闻</li>
        <li>娱乐</li>
        <li>社会</li>
        <li>生活</li>
    </ul>
</div>
<div class="content">
    <p class="show">新闻内容</p>
    <p>娱乐内容</p>
    <p>社会内容</p>
    <p>生活内容</p>
</div>
<script>
    $(document).ready(function(){
        $("li").click(function(){
            //给当前对象添加类名 它的兄弟们移除类名
            $(this).addClass("active").siblings("li").removeClass("active");
            // 保存当前点击对象的索引值
            var x=$(this).index();
            // eq(x)  除x以外
            $("p:eq("+x+")").addClass("show").siblings("p").removeClass("show");
        })
    })
</script>
</body>

张张张96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQ选项卡

jQ选项卡<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul,li{list-style: none;display: block;} .clearfix:
复制链接

扫一扫