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

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_35367612/article/details/53521106
代码
<%@ 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(){})的方式去绑定!







            
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页