JS实现鼠标单击Tab表单切换

最新推荐文章于 2024-05-30 21:42:04 发布

一米阳光里的晴天娃娃

最新推荐文章于 2024-05-30 21:42:04 发布

阅读量2.7k

点赞数

分类专栏： html编写网页常用功能代码文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_39431596/article/details/78657762

版权

html编写网页常用功能代码专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码：

<!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 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%;  
		    }  
		</style>  
	</head>
	<body>
		<div class="tab-container">  
		        <ul class="tab-head">  
		         <li id="1" class="select" οnmοusedοwn="$(this)"><a href="#">Tab1</a></li>  
		         <li id="2" οnmοusedοwn="$(this)"><a href="#">Tab2</a></li>  
		         <li id="3" οnmοusedοwn="$(this)"><a href="#">Tab3</a></li>  
		         <li id="4" οnmοusedοwn="$(this)"><a href="#">Tab4</a></li>  
		         <li id="5" οnmοusedοwn="$(this)"><a href="#">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>

效果图：