原创投稿
广告
广告
广告 广告 广告 广告
广告
广告 国内BGP机房32G内存299元 网站收录排名问题解决 【超牛】搜外友链平台 站长在线扒站工具【免费】 【免费】站长开发工具箱 【推荐】站长自动外链工具 广告位联系QQ：253000106 独立服务器100M/不限/免备 2核2G服务器新用户低至68元/年 虚拟资源平台,轻松变现 10000来路IP只需8元 站群系统程序-专注SEO站群 黑帽SEO论坛_黑帽聚集地 企业HTTP代理IP服务提供商 软文推广，在线获客【定制】 站群服务器99元起 SEO免费工具分享 外推代发包收录 【国内国际】短信推广，免费测试 实力产品收量 外链代发 5分一条 快速排名 █一解决“收录、排名”问题一█ ●●●优质搜狗泛收录域名●●● AI数字人直播系统源码 百度SEO排名7-15天上首页
  1. 创想鸟首页
  2. 站长之家
  3. 编程技术

怎样使用js实现鼠标单击Tab表单切换

PHP中文网 • • 编程技术 • 阅读 2

这次给大家带来怎样使用js实现鼠标单击Tab表单切换，使用js实现鼠标单击Tab表单切换的注意事项有哪些，下面就是实战案例，一起来看一下。

代码：

                *{     padding: 0;     margin: 0;     border:0;    }    body{     text-align: center;    }    ul{     list-style: none;    }    a{     text-decoration: none;     color: #ff6666;     font-family: Arial;    }    .tab-container{     width: 398px;     height: 200px;     border:1px #ffcccc solid;     margin: 0 auto;     position: relative;     overflow: hidden;    }    /*tab-head begin*/    .tab-head{     width: 400px;     height:30px;     left:0;     background: #ffcccc;     position: absolute;     left:-1px;//这里设置-1是为了li的border与最外层的border重合    }    .tab-head li{     float:left;     height: 29px;     line-height: 29px;     width: 78px;     overflow: hidden;     padding: 0 1px;     border-bottom: 1px solid #ffcccc;     background: #ffeeee;    }        li.select{     background: #fff;     padding: 0;     border-left: 1px solid #ffcccc;     border-right: 1px solid #ffcccc;     border-bottom: 1px solid #fff;     }    /*tab-head end tab-panel begin*/    .tab-panel{     position: relative;     width: 100%;     height: 85%;     top: 15%;     -webkit-transition:all 0.01s linear;//切换过渡效果    }    .tab-panel section{     position: absolute;     display: inline-block;     width: 100%;     height: 100%;    }    #panel-1{     left: 0;    }    #panel-2{     left: 100%;    }    #panel-3{     left: 200%;    }    #panel-4{     left: 300%;    }    #panel-5{     left: 400%;    }          
     
     
      
这是panel-1
       
这是panel-2
       
这是panel-3
       
这是panel-4
       
这是panel-5
        
    
         function $(id){     var lis = document.getElementsByTagName('li');     for (var i = 0; i < lis.length; i++) {      lis[i].setAttribute('class','');     };     id.setAttribute('class','select');     var ele = document.getElementById('tab-panel');     ele.style.left=-(id.id-1)+'00%';     }

登录后复制

效果图：

怎样使用js实现鼠标单击Tab表单切换

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

如何使用JS实现分页打印

mac内nodejs如何更新最新版本

以上就是怎样使用js实现鼠标单击Tab表单切换的详细内容，更多请关注【创想鸟】其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2754612.html

赞 (0)
0 0

关于作者

PHP中文网的头像

PHP中文网签约作者

433.1K 文章
0 评论
1 粉丝
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
上一篇 2025年3月8日 06:59:23
下一篇 2025年3月8日 06:59:33

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论

请登录

您还未登录，请登录后再进行相关操作！

登录 注册