博主信息
博文 19
粉丝 0
评论 0
访问量 15926
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
超简单的选项卡
无名小辈
原创
1102人浏览过

CSS样式

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. li {
  8. list-style: none;
  9. }
  10. a {
  11. color: #474747;
  12. text-decoration: none;
  13. display: block;
  14. }
  15. a:hover,
  16. a.active {
  17. color: #0fb340;
  18. background-color: aliceblue;
  19. }
  20. nav.menu {
  21. display: grid;
  22. grid-template-columns: repeat(3, 1fr);
  23. height: 2em;
  24. line-height: 2em;
  25. text-align: center;
  26. }
  27. nav.menu > a {
  28. }
  29. .box {
  30. width: 70vw;
  31. margin: 0 auto;
  32. line-height: 2em;
  33. border: 1px solid #333;
  34. border-radius: 15px;
  35. overflow: hidden;
  36. }
  37. ul {
  38. background-color: aliceblue;
  39. display: none;
  40. }
  41. ul.active {
  42. display: block;
  43. }
  44. </style>

HTML中body主体代码

  1. <div class="box">
  2. <nav class="menu">
  3. <a href="" class="active" data-index="1">阳泉</a>
  4. <a href="" data-index="2">山西</a>
  5. <a href="" data-index="3">全国</a>
  6. </nav>
  7. <ul class="active" data-index="1">
  8. <li><a href="">阳泉是个山城,这里全是山</a></li>
  9. <li><a href="">阳泉是个山城,这里全是山</a></li>
  10. <li><a href="">阳泉是个山城,这里全是山</a></li>
  11. <li><a href="">阳泉是个山城,这里全是山</a></li>
  12. <li><a href="">阳泉是个山城,这里全是山</a></li>
  13. </ul>
  14. <ul data-index="2">
  15. <li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
  16. <li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
  17. <li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
  18. <li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
  19. <li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
  20. </ul>
  21. <ul data-index="3">
  22. <li><a href="">全国山最多最密集的地方在重庆</a></li>
  23. <li><a href="">全国山最多最密集的地方在重庆</a></li>
  24. <li><a href="">全国山最多最密集的地方在重庆</a></li>
  25. <li><a href="">全国山最多最密集的地方在重庆</a></li>
  26. <li><a href="">全国山最多最密集的地方在重庆</a></li>
  27. </ul>
  28. </div>

script脚本

  1. <script>
  2. const menu = document.querySelector(".menu");
  3. menu.addEventListener("mouseover", show, false);
  4. function show() {
  5. // 关闭默认操作
  6. event.preventDefault();
  7. // nav.menu 里面 A标签 全部清除 active 样式
  8. [...event.currentTarget.children].forEach((item) =>
  9. item.classList.remove("active")
  10. );
  11. // nav.menu 里面 A标签 当鼠标选定时,添加active 样式
  12. event.target.classList.add("active");
  13. // 选中所有UL内容
  14. const uls = document.querySelectorAll("ul");
  15. // 清除所有UL的acitve 样式
  16. uls.forEach((item) => item.classList.remove("active"));
  17. // 将uls对象转为真数组
  18. [...uls]
  19. // 通过find函数,找到 nav.menu选项卡中(event.target.dataset.index)值与 ul内容中(item.dataset.index)相等的值
  20. .find((item) => event.target.dataset.index == item.dataset.index)
  21. // 为data-index 相等的值添加 active 样式
  22. .classList.add("active");
  23. }
  24. </script>
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学