登录  /  注册
首页 > 博客列表 > 选项卡案例（javacript原生代码）
博主信息
博文 100
粉丝 8
评论 2
访问量 146568
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
选项卡案例（javacript原生代码）
lilove的博客
原创
997人浏览过

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. }

运行效果

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：知道吗?纯css也可以实现选项卡功能, 不写一行js
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录