点击第一个li,其他li改变样式
<ul><li>a</li><li>b</li><li>c</li>.....</ul><ul><li>1111</li><li>2222</li><li>3333</l...
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
.....
</ul>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
......
</ul>
点击a,1111显示,2222和3333隐藏
点击b, 2222显示,1111和3333隐藏
点击c, 3333显示,1111和2222隐藏
......
求大神们,我有点急,要考虑到扩展性,大神们,急!!!!! 展开
<li>a</li>
<li>b</li>
<li>c</li>
.....
</ul>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
......
</ul>
点击a,1111显示,2222和3333隐藏
点击b, 2222显示,1111和3333隐藏
点击c, 3333显示,1111和2222隐藏
......
求大神们,我有点急,要考虑到扩展性,大神们,急!!!!! 展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<ul id = "ctrl">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul id = "resp">
<li style = "display: none">1</li>
<li style = "display: none">2</li>
<li style = "display: none">3</li>
</ul>
<script>
$("#ctrl").on('click', 'li',function(event) {
var index = $(this).index();
var target = $("#resp").children().eq(index);
$(target).css('display','block');
$(target).siblings().css('display','none');
});
</script>
</body>
</html>
追问
非常感谢
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询