jquery实现选项卡(超级简便)

最新推荐文章于 2022-01-18 21:48:58 发布

Inspiring_

最新推荐文章于 2022-01-18 21:48:58 发布

阅读量314

点赞数 1

文章标签： jquery实现选项卡 Jquery实现选项卡

本文链接：https://blog.csdn.net/weixin_44021199/article/details/98327064

版权

*之前文章里有写到选项卡，上一个使用JS写的，这次用jquery写的，与之前大不相同的是，jquery语言简便，代码量少，易懂！

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #container{
            margin:200px;
        }
        #btns{
            overflow: hidden;
        }
        #btns li{
            background: #F1F1F1;
            width: 50px;
            height: 30px;
            float: left;
            border:1px solid  #898989;
            margin-right: 10px;
            line-height: 30px;
            text-align: center;
            border-bottom: transparent;
            cursor: pointer;
        }
        #container #btns .active{
            background: yellowgreen;
            color:#fff;
        }

        #content{
            width: 250px;
            height: 200px;
            background: #F1F1F1;
            border:1px solid #898989;
        }
        #content div{
            display: none;
        }
        #content .selected{
            display: block;

        }
    </style>
</head>
<body>
    <div id="container">
        <ul id="btns">
            <Li class="active">时事</Li>
            <Li>体育</Li>
            <Li>娱乐</Li>
        </ul>
        <div id="content">
            <div class="selected">时事</div>
            <div>体育</div>
            <div>娱乐</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        
        $('#btns').children().on('click',function(){
            $(this).addClass('active').siblings().removeClass("active")
            var index = $(this).index();
            $(this).parent().siblings().children().eq(index).addClass("selected").siblings().removeClass("selected");     

        })
        
    </script>
    
</body>
</html>

给ul里所有的li绑定事件，点击哪一个li，就给哪个li加active样式，其余兄弟li移除此active样式，定义一个index取到当前li索引，利用eq() 找到索引相同添加selected样式，其余兄弟移除selected样式

效果图：

在这里插入图片描述

Inspiring_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现选项卡(超级简便)

*之前文章里有写到选项卡，上一个使用JS写的，这次用jquery写的，与之前大不相同的是，jquery语言简便，代码量少，易懂！测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...
复制链接

扫一扫