Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选项卡案例（javacript原生代码）
Blogger Information
Blog 100
fans 8
comment 2
visits 149897
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选项卡案例（javacript原生代码）
lilove的博客
Original
1035 people have browsed it

JS原生代码选项卡

html部分

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>选项卡实例</title>
  8. </head>
  9. <style>
  10.     @import url("css/demo1.css");
  11. </style>
  13. <body>
  14.     <div class="container">
  15.         <ul class="tabs">
  16.             <li class="tab-active" data-index=1>选项卡1</li>
  17.             <li data-index=2>选项卡2</li>
  18.             <li data-index=3>选项卡3</li>
  19.         </ul>
  20.         <ul class="tab-body" data-index=1>
  21.             <li><a href="">选项卡1内容</a></li>
  22.             <li><a href="">选项卡1内容</a></li>
  23.             <li><a href="">选项卡1内容</a></li>
  24.             <li><a href="">选项卡1内容</a></li>
  25.         </ul>
  26.         <ul class="tab-body tab-hidden" data-index=2>
  27.             <li><a href="https://www.php.cn" target="_blank">选项卡2内容</a></li>
  28.             <li><a href="">选项卡2内容</a></li>
  29.             <li><a href="">选项卡2内容</a></li>
  30.             <li><a href="">选项卡2内容</a></li>
  31.         </ul>
  32.         <ul class="tab-body tab-hidden" data-index=3>
  33.             <li><a href="">选项卡3内容</a></li>
  34.             <li><a href="">选项卡3内容</a></li>
  35.             <li><a href="">选项卡3内容</a></li>
  36.             <li><a href="">选项卡3内容</a></li>
  37.         </ul>
  38.     </div>
  40. </body>
  41. <script src="js/demo1.js"></script>
  43. </html>

CSS部分

  1. /* 选项卡样式表 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  8. a {
  9.   text-decoration: none;
  10. }
  12. li {
  13.   list-style-type: none;
  14. }
  16. .container {
  17.   width: 300px;
  18.   margin: 100px auto;
  19. }
  21. .tabs {
  22.   width: 300px;
  23.   letter-spacing: -0.5em;
  24.   word-spacing: -0.5em;
  25. }
  27. .tabs > li {
  28.   width: 100px;
  29.   height: 41px;
  30.   color: white;
  31.   display: inline-block;
  32.   padding: 10px;
  33.   text-align: center;
  34.   background-color: dodgerblue;
  35.   letter-spacing: 0;
  36.   word-spacing: 0;
  37. }
  39. .tabs > li.tab-active {
  40.   background-color: darkblue;
  41. }
  43. .tabs > li:hover {
  44.   cursor: default;
  45. }
  47. .tab-body a {
  48.   color: white;
  49.   display: block;
  50.   padding: 10px;
  51.   background-color: darkblue;
  52. }
  54. .tab-body a:hover {
  55.   color: navy;
  56.   background-color: deepskyblue;
  57. }
  59. .tab-hidden {
  60.   display: none;
  61. }

javascript部分

  1. // 选项卡js文件
  3. // 获取元素
  4. var tabs = document.querySelector(".tabs");
  5. var tabBody = document.querySelectorAll(".tab-body");
  7. // 给选项卡添加事件监听
  8. // tabs.addEventListener('click', show, false);
  9. tabs.addEventListener('mouseover', show, false);
  11. function show(ev) {
  13.     // 1.清除事件默认行为
  14.     ev.preventDefault();
  16.     // 2.选项卡高亮
  17.     ev.currentTarget.childNodes.forEach(function (item) {
  18.         if (item.nodeType === 1) {
  19.             // 清除其他选项卡高亮样式
  20.             item.classList.remove("tab-active");
  21.         } else {
  22.             // 将点击的选项卡高亮显示
  23.             ev.target.classList.add("tab-active");
  24.         }
  25.     });
  27.     // 3.将选项卡对应内容切换（根据data-index属性值判断）
  28.     tabBody.forEach(function (item) {
  29.         // 只选择和当前点击的选项卡data-index属性相等的显示
  30.         if (ev.target.dataset.index === item.dataset.index) {
  31.             item.classList.remove('tab-hidden');
  32.         } else {
  33.             // 隐藏不是当前要显示的选项卡内容
  34.             item.classList.add('tab-hidden');
  35.         }
  36.     });
  38. }

运行效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：知道吗?纯css也可以实现选项卡功能, 不写一行js
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