点击第一个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隐藏
......
求大神们,我有点急,要考虑到扩展性,大神们,急!!!!!
展开
 我来答
dagewxw
2017-04-27 · TA获得超过5928个赞
知道大有可为答主
回答量:3523
采纳率:67%
帮助的人:962万
展开全部
<!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>
追问
非常感谢
ej...0@sohu.com
2017-04-27 · TA获得超过378个赞
知道小有建树答主
回答量:261
采纳率:0%
帮助的人:50.5万
展开全部
把li的float属性设置为left,可以设置为横着的。float:left
追问
展开看
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式