关于li点击变背景色的问题,js实现后只对顶层ul的li起效 在线等,比较急,帮帮忙!!!
<divclass="aboluo_cantain"><ul><li><span>1</span></li><li><span>2</span></li><li><spa...
<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> 展开
<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> 展开
1个回答
展开全部
$(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需要清除浮动
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询