jquery点击给单个li加样式再点击取消样式，怎么弄

liyuhuazai2011 2013-12-09 11:32:20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body table{ width:500px; height:200px; border:solid 1px #CCCCCC;}
.one{ color:#00F;}
.two{ color:red;}
</style>
<script type="text/javascript">

$(document).ready(function(){
$(".one").toggle(function () {
$(".one").removeClass("one").addClass("two");
}, function () {
$(".two").removeClass("two").addClass("one");
})

});
</script>
<body>
<div>
<ul>
<li class="one">AAAAAAAAAAA</li>
<li class="one">AAAAAAAAAAA</li>
<li class="one">AAAAAAAAAAA</li>
<li class="one">AAAAAAAAAAA</li>
</ul>
</div>

</body>
</html>
如上面的代码，当我要点击第一个li的时候，第一个li的就添加上一个样式（也就是class=two的样式），而其他li的样式依旧是class=one的样式,当点击第二个li的时候，而再点击一次第一个的li的时候，就取消刚才加进去的样式（变成最原始的模样，就是只存在class = one）；
也是一样，点击第二个li的时候，添加一个样式，而其他的li还是原来的样子（class = one），再点击一次第二个li的时候，取消添加的样式

也就是我每次点击到的li只在当前的li添加样式，二次点击已添加样式的li会取消第一次点击时候添加的样式。
菜鸟学习ing,请高手指教，谢谢。

...全文

10950 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

eclipsewangping 2013-12-12

打赏
举报

$(function(){ $("li").toggle( function(){ $(this).removeClass("one").addClass('two').siblings().removeClass("two").addClass("one"); }, function(){ $(this).removeClass("two").addClass("one").siblings().removeClass("one").addClass("two"); } ) } )

lixujin123 2013-12-11

打赏
举报

jquery里面有个toggle，很适合你这种情况，可以参考我写的：


  $(function(){
       $("li").toggle(
            function(){
                $(this).removeClass("one");
                $(this).addClass("two");
            },
            function(){
                $(this).removeClass("two");
                $(this).addClass("one");
            }
            )
        })

刘天空 2013-12-10

打赏
举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<link href="css/mobile.css" rel="stylesheet" />
<title>test</title>
<script type="text/javascript" src="js/app.js"></script>

</head>
<style type="text/css">
.test li{margin-bottom:10px}
.one{background:#f00;}
.two{background:#000;color:#fff;font-weight:bold;}
</style>
<body>


<div class="test">
    <ul>
        <li class="one">AAAAAAAAAAA</li>
        <li class="one">AAAAAAAAAAA</li>
        <li class="one">AAAAAAAAAAA</li>
        <li class="one">AAAAAAAAAAA</li>
    </ul>
</div>

<script type="text/javascript">
$(function(){
		
	$(".test").bind("click",function(e){
        e = e || window.event;
        var tar = e.srcElement || e.target;
        if(tar.nodeName.toLowerCase() == "li" && !$(tar).hasClass('two')){
            $(tar).addClass("two");
            $(tar).siblings().removeClass("two");
        }else{
            $(tar).removeClass("two");
        }
    })	


})

</script>
</body>
</html>