JQ实现选项卡样式切换

傷城~ 2023-02-16 06:47 82阅读 0赞

HTML

<div>
    <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
    </ul>
</div>

JS

$("li").click(function(){
$(this).toggleClass("active");
$(this).siblings().removeClass("active");
})

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq实现一个简易的选项卡

以下写的方法不是最优质的的方法，就是为了练练手，希望大家不要介意，如有问题，还请多指教 <!DOCTYPE html> <html lang="en">

浅浅的花香味﹌/ 2023年05月31日 12:21/ 0 赞/ 80 阅读

相关 JQ实现选项卡样式切换

HTML <div> <ul> <li class="active"></li> <li></li> <li>

傷城~/ 2023年02月16日 06:47/ 0 赞/ 83 阅读

相关 jq实现tab选项卡

<div class="tab"> <ul class="tab-title"> <li class="this">

心已赠人/ 2023年02月11日 07:27/ 0 赞/ 85 阅读

相关选项卡切换

一个选项卡，意思就是切换选项，一个最简单的列子，爱玩手机和电脑的肯定用过，选项卡和滚动条我觉得是差不多一个意思，当然只是差不多，并不绝对。因为两者都是屏幕高度不够，而设计出

ゞ浴缸里的玫瑰/ 2023年01月09日 03:51/ 0 赞/ 278 阅读

相关 vue 选项卡切换

vue 初学者选项卡切换效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

ゞ浴缸里的玫瑰/ 2022年12月01日 15:53/ 0 赞/ 280 阅读

相关 trick：:target实现选项卡切换

:target是什么？ MDN是这样描述的：[:target][target] > The :target pseudo-class represents the un

谁借莪１个温暖的怀抱￠/ 2022年08月05日 02:27/ 0 赞/ 319 阅读

相关 jQ选项卡

jQ选项卡 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

刺骨的言语ヽ痛彻心扉/ 2022年06月14日 10:54/ 0 赞/ 318 阅读

相关 jq实现的选项卡

效果图： ![这里写图片描述][SouthEast] 代码如下： <!DOCTYPE html> <html lang="en"> <head>

偏执的太偏执、/ 2022年05月31日 04:08/ 0 赞/ 264 阅读

相关 JQ实现——TAB选项卡切换登录界面

今天，分享一个简单实用的TAB选项卡切换登录界面。 ![这里写图片描述][70] ![这里写图片描述][70 1] 主页部分 <!DOCTYPE htm

柔光的暖阳◎/ 2022年05月23日 12:12/ 0 赞/ 461 阅读

相关 JS实现选项卡切换

面是用JS简单地实现选项卡功能的实例。 > 注意点：（1）闭包后，要使用立即执行函数； > > （2）绑定事件注意参数； > > （3）思路：将当前div显示，其余隐藏，

悠悠/ 2021年12月03日 10:45/ 0 赞/ 509 阅读