Blogger Information
Blog 19
fans 0
comment 0
visits 10700
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
超简单的选项卡
无名小辈
Original
521 people have browsed it

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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post