jquery+css实现点击他时变色点击其他时自动还原

最新推荐文章于 2024-07-19 17:13:16 发布

浪里淘沙

最新推荐文章于 2024-07-19 17:13:16 发布

阅读量1.5w

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_35367612/article/details/53521106

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath }/jslib/bootstrap-3.3.6/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/jslib/bootstrap-3.3.6/dist/css/style.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/jslib/jquery-2.1.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jslib/bootstrap-3.3.6/dist/js/bootstrap.min.js" charset="utf-8"></script>

<head>
    <title>测试</title>
</head>

<style type="text/css">
    #list{wdith:100%;height:100px;}
    #list > li{float:left;width:50px;height:50px;background:black;margin:10px;cursor:pointer}
    .cur{color:#fff;background:#00CC00}
</style>
<script type="text/javascript">
    $(function(){
        var txt = "<li><a>测试1<a></li><li><a>测试1<a></li><li><a>测试1<a></li>";
        $("#list").append(txt);
        $("#list").on("click","li",function(){
            $("#list li").eq($(this).index()).attr("style","background:#00CC00").siblings().removeAttr("style");;
            /*$("#list li").eq($(this).index()).addClass("cur").siblings().removeClass("cur");*/
        });
    })
</script>
<body>
<ul id="list">

</ul>
</body>

注意：
*在做的时候碰到一个小问题，因为我的元素是追加的，所以不能去去提前写他的css样式，也不能使用

$("#list li").eq($(this).index()).addClass("cur").siblings().removeClass("cur");
所以使用
$("#list li").eq($(this).index()).attr("style","background:#00CC00").siblings().removeAttr("style")来代替。

*再就是给追加的元素添加事件的时候，应该注意jquery的版本，

如果版本是1.7或者1.7之前则使用
$(选择器).live('click',function(){})的方式去绑定事件，
如果jquery版本是1.7之后则使用
$(选择器).on('click','所操作的元素',function(){})的方式去绑定！