js实现鼠标单击Tab表单切换效果

时间：2021-05-26

本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ 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{ 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-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%; } </style> </head> <body> <div class="tab-container"> <ul class="tab-head"> <li id="1" class="select" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab1</a></li> <li id="2" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab2</a></li> <li id="3" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab3</a></li> <li id="4" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab4</a></li> <li id="5" onmousedown="$(this)"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Tab5</a></li> </ul> <div id="tab-panel" class="tab-panel"> <section id="panel-1"><p>这是panel-1</p></section> <section id="panel-2"><p>这是panel-2</p></section> <section id="panel-3"><p>这是panel-3</p></section> <section id="panel-4"><p>这是panel-4</p></section> <section id="panel-5"><p>这是panel-5</p></section> </div> </div> <script type="text/javascript"> 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%'; } </script> </body> </html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章