关于li点击变背景色的问题,js实现后只对顶层ul的li起效 在线等,比较急,帮帮忙!!!

<div class="aboluo_cantain">
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span style="color:red;">6</span></li>
<li><span style="color:red;">7</span></li>
</ul>
<ul>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span style="color:red;">13</span></li>
<li><span style="color:red;">14</span></li>
</ul>
</div>
<script src=不让写网址></script>
<script type="text/javascript">
$(function(){
$(".aboluo_cantain ul li").click(function(){
$(".aboluo_cantain ul li").eq($(this).index()).addClass("cur").siblings().removeClass("cur");
})
})
</script>

<style>
.aboluo_cantain ul{ list-style:none;}
.aboluo_cantain ul li{ float:left;
font-size:14px;
color:#4e4e4e;
width:67px;
height:32px;
border-bottom:#d2d2d2 1px solid;
border-left:#d2d2d2 1px solid;
cursor:pointer;
padding-top:18px;
color:#29abe2;
/*background:url(../images/yj0812prise.png) no-repeat left;*/}
.aboluo_cantain ul li:hover{
background:#e9f6fc;
font-size:16px;
font-weight:bold;
color: #ff9a9a;}
.aboluo_cantain ul li.cur{
background:#ff9a9a;
font-size:18px;
font-weight:bold;
color: #FFF;}
</style>

$(function(){
$(".aboluo_cantain ul li").click(function(){
$(this).addClass("cur").siblings().removeClass("cur");
})
})

js优化修改

 .aboluo_cantain ul{ list-style:none;overflow: auto; zoom: 1;}

css你的ul需要清除浮动

追问

十二万分的感谢!!按照您说的方法改了,现在的问题是每一个ul都单独控制自己的事件,我想实现日历单个日期点击后变色怎么弄呢?还麻烦给解答一下!

十二万分的感谢!!按照您说的方法改了,现在的问题是每一个ul都单独控制自己的事件,我想实现日历单个日期点击后变色怎么弄呢?还麻烦给解答一下!

温馨提示:内容为网友见解,仅供参考
无其他回答
相似回答
大家正在搜