当前位置:首页 > 前端开发 > javascript > 正文内容

js添加或删除class类名

Miao3个月前 (08-04)javascript207

通常通过js方法给div进行class类名的添加或者删除,比较常见的就是tab切换了,下面就来具体讲一下如何使用js进行操作,最后会附上完整实例代码:

<div class="ul">
    <div class="li active" onclick="funJs(0)">HTML</div>
    <div class="li" onclick="funJs(1)">CSS</div>
    <div class="li" onclick="funJs(2)">JavaScript</div>
</div>

首先:获取所有li节点,这里的active就是我们要进行添加、删除的样式。

var li_arr = document.getElementsByClassName("li");

方法一:原生写法

function funJs(index) {
    for (var i = 0; i < li_arr.length; i++) {
        // 当前点击li添加active样式
        if (i == index) {
            li_arr[i].classList.add("active");
        }
        // 其余删除active样式
        else {
            li_arr[i].classList.remove("active");
        }
    }
}

方法二:jQuery写法,不要忘了引入jQuery版本库哟!

function funJquery(index) {
    $(".li").eq(index).addClass("active").siblings().removeClass("active");
}

实例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js添加或删除class类名</title>
        <style type="text/css">
            .ul {
                width: 100px;
                height: 150px;
            }
            .ul .li {
                width: 100px;
                line-height: 50px;
                text-align: center;
                background: #000;
                border-bottom: 1px solid #fff;
                color: #fff;
            }
            .ul .active {
                background: #f30;
            }
        </style>
    </head>
    <body>
        <div class="ul">
            <div class="li active" onclick="funJs(0)">HTML</div>
            <div class="li" onclick="funJs(1)">CSS</div>
            <div class="li" onclick="funJs(2)">JavaScript</div>
        </div>
        <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            // 获取所有li节点
            var li_arr = document.getElementsByClassName("li");
            // 方法一:js原生
            function funJs(index) {
                for (var i = 0; i < li_arr.length; i++) {
                    if (i == index) {
                        li_arr[i].classList.add("active");
                    } else {
                        li_arr[i].classList.remove("active");
                    }
                }
            }
            // 方法二:jQuery写法,不要忘了引入jQuery版本库哟!
            function funJquery(index) {
                $(".li").eq(index).addClass("active").siblings().removeClass("active");
            }
        </script>
    </body>
</html>

扫描二维码推送至手机访问。

版权声明:本文由Miao发布,版权归作者所有,如需转载请注明出处。

本文地址:https://www.wmlike.com/?id=46

分享给朋友:

相关文章

使用JavaScript获取radio被选中的值

在日常工作中,单选是比较常见的;用到getElementsByName(name)方法,查询元素的name属性,和getElementById()相似,这里就以是否注射新冠疫苗写个小例子: HTML...

js对url进行编码和解码的方式

1、escape 和 unescapeescape 方法 对String对象进行编码,以便他们能够在所有计算机上可读。对除ASCII字母、数字、标点符号 @ * _ + - . /...

js平均分割数组

js平均分割数组

以下实例是平均每组分为3个平均分割了,剩余的会单独成为一组,想要其它数量分割,将3改为对应数字即可。 var data = ['法国', '澳大利亚', '智...

jquery全部版本下载(持续更新)

注意事项: jquery2.0以上版本不再支持IE6/7/8,请根据项目需求选择版本;jquery官网引用地址经常会出现打不开的情况,尽量不要调用官网地址;个人建议:最好下载保存到自己服务器; 版...

javascript实现年月日三级联动

html <select name="year"></select> <select name="month"><...

获取url参数值、修改url参数值

获取url参数的值function getQuery(name) { var reg = new RegExp("(^|&)" + name + "=(...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。