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

这次给大家带来怎样使用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%;

}

• Tab1
• Tab2
• Tab3
• Tab4
• Tab5

这是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%';

}

效果图：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：