jQery动态添加删除类样式

最新推荐文章于 2024-04-19 15:18:46 发布

dongdong咚咚咚

最新推荐文章于 2024-04-19 15:18:46 发布

阅读量1.8k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/dongzhensong/article/details/83995289

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

添加类样式：

	// 例如为一类类名为cs-li-char的li元素添加新样式'default'
    $('.cs-li-char').addClass('default');

删除类样式

	// 为一类类名为cs-li-char的li元素移除样式'default'
    $('.cs-li-char').removeClass('default');

举个?：
有一个list列表：

<div>
   <ul>
        <li class="cs-li-char default">第一行</li>
        <li class="cs-li-char ">第二行</li>
        <li class="cs-li-char ">第三行</li>
    </ul>
</div>

所有定义的样式：

<style type="text/css">

    .cs-li-char
    {
        list-style: none;
        width: 300px;
        margin-top: 10px;
        border: 1px solid #f0f0f0;
    }

    .default
    {
        background-color: #00af0e;
        color: white;
    }
</style>

给每一个li绑定点击事件，点击后移除所有的default样式，再给当前点击的li添加default样式【代码】：

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
       $('.cs-li-char').on('click',function (e) {
           console.log('dddd:'+$(this).attr('class'));
           $('.cs-li-char').removeClass('default');
           $(this).addClass('default');
       }) ;
    });
</script>

默认选中的是第一行：
在这里插入图片描述

点击第三行，通过jQuery动态操作li的类属性后：
在这里插入图片描述

全部代码【jQuery引用除外】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .cs-li-char{
            list-style: none;
            width: 300px;
            margin-top: 10px;
            border: 1px solid #f0f0f0;
        }

        .default
        {
            background-color: #00af0e;
            color: white;
        }
    </style>
</head>


<body>

    <div>
        <ul>
            <li class="cs-li-char default">第一行</li>
            <li class="cs-li-char ">第二行</li>
            <li class="cs-li-char ">第三行</li>
        </ul>
    </div>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           $('.cs-li-char').on('click',function (e) {
               // console.log('dddd:'+this);
               $('.cs-li-char').removeClass('default');
               $(this).addClass('default');
           }) ;
        });
    </script>
</body>
</html>

dongdong咚咚咚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQery动态添加删除类样式

添加类样式： // 例如为一类类名为cs-li-char的li元素添加新样式'default' $('.cs-li-char').addClass('default');删除类样式 // 为一类类名为cs-li-char的li元素移除样式'default' $('.cs-li-char').removeClass('default');举个
复制链接

扫一扫