3条回答 默认 最新
- CSDN专家-天际的海浪 2021-09-18 22:24关注
你题目的解答代码如下:(如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title> <style type="text/css"> .list p.active{ background-color:#e73839; color:white; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function (){ $(".list p").click(function () { //获取点击的元素给其添加样式,讲其兄弟元素的样式移除 $(this).addClass("active").siblings().removeClass("active"); //获取选中元素的下标 var index = $(this).index(); $(".inner .item").eq(index).show().siblings().hide(); }); }); </script> </head> <body> <div class="box"> <div class="list"> <p class="active">1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div class="inner"> <div class="item">第一块</div> <div class="item" style="display: none;">第二块</div> <div class="item" style="display: none;">第三块</div> <div class="item" style="display: none;">第四块</div> <div class="item" style="display: none;">第五块</div> </div> </div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 uniapp uview http 如何实现统一的请求异常信息提示?
- ¥15 有了解d3和topogram.js库的吗?有偿请教
- ¥100 任意维数的K均值聚类
- ¥15 stamps做sbas-insar,时序沉降图怎么画
- ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
- ¥15 关于#Java#的问题,如何解决?
- ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
- ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
- ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
- ¥500 火焰左右视图、视差(基于双目相机)