JS里怎么用button按钮来控制一个div里若干li的选择
在一个div里有若干个li，以一个背景颜色表示某个li被选中，点击一个button的时候，开始向下选择。div高度过小的时候，要能逐行显示隐藏的li，如果到底越界，则从第...
在一个div里有若干个li，以一个背景颜色表示某个li被选中，点击一个button的时候，开始向下选择。div高度过小的时候，要能逐行显示隐藏的li，如果到底越界，则从第一个li从新开始。js高手帮帮忙。。。谢谢
展开
1个回答
展开全部
先引入jquery，节约代码
css代码
.selected{background-color:#ff0000}html代码
<button id="chooseNext"></button>
<div id="liList">
<li class="selected">1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
<li>7777777</li>
</div>
js代码
$(function(){
var length = $("#liList").children("li").length - 1;
$("#chooseNext").on("click",function(){
var sIndex = $("#liList").children("li.selected").index();
if(sIndex == length){
sIndex = -1;
}
$("#liList").children().removeClass("selected");
$("#liList").children("li:eq(" + (sIndex + 1) + " )").addClass("selected");
})
})完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
.selected{background-color:#ff0000}
</style>
<button id="chooseNext">选择下一个</button>
<div id="liList">
<li class="selected">1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
<li>7777777</li>
</div>
<script type="text/javascript">
$(function(){
var length = $("#liList").children("li").length - 1;
$("#chooseNext").on("click",function(){
var sIndex = $("#liList").children("li.selected").index();
if(sIndex == length){
sIndex = -1;
}
$("#liList").children().removeClass("selected");
$("#liList").children("li:eq(" + (sIndex + 1) + " )").addClass("selected");
})
})
</script>
</body>
</html>
追问
呃，貌似，执行不起来，点button，没反应啊。
追答
你引入jquery了么？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
