开发者社区> 问答> 正文

jquery 每次点击只改变最后一个的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{width: 250px;height: 100px;}
        ul{overflow: hidden;}
        li{width: 20px;height: 20px;float: left;background-color: #f0f0f0;list-style: none;margin-left: 10px;}
    </style>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
             $('input').click(function(){
                 $('li:last').css('background-color','#333333');
             })
        });
    </script>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>

    <input type="button" value="点击"/>
</body>
</html>

现在有以上代码段,我想实现的功能是,当我每次点击的时候,都是Li标签的背景色为#fofofo的最后一个改变颜色为#333333,请问代码该如何改写?如果用jquery的not()方法是否可行?

展开
收起
小旋风柴进 2016-05-27 10:22:06 1851 0
1 条回答
写回答
取消 提交回答
  • <style>
        .bg-black{
            background-color: #333333;
        }
    </style>
    
    $('li:not(.bg-black):last').addClass('bg-black');
    2019-07-17 19:17:12
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载