标签栏切换效果

最新推荐文章于 2023-11-24 19:34:26 发布

qq_40891002

最新推荐文章于 2023-11-24 19:34:26 发布

阅读量4.7k

点赞数 10

分类专栏： js css 文章标签： js html css

本文链接：https://blog.youkuaiyun.com/qq_40891002/article/details/106532531

版权

js 同时被 2 个专栏收录

16 篇文章

订阅专栏

css

10 篇文章

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>标签栏切换效果</title>
    <style>
    body{
		margin: 0px;
		padding: 0px;
	}
	.tab-box{
		width: 383px;
		border-top: 2px solid goldenrod;
		margin: 30px;
		border: 1px solid blue;
	}
	.tab-head{
		height: 31px;
	}
	.tab-head-div{
		width: 95px;
		height: 30px;
		float: left;
		border-bottom: 1px solid #ccc;
		border-right: 1px solid black;
		text-align: center;
		cursor: pointer;
		background: blue;
		line-height: 30px;
	
	}
	.tab-head-r{
		border-right: 0;
	}
	.tab-head .current{
		background: #fff;
		border-bottom: 1px solid #fff;
		color: #000;
	}
	.tab-body-div{
		display: none;
		margin: 20px 10px;
		border: 1px solid blue;
		
	}
	.tab-body .current{
		display: block;
	}
    </style>
  </head>
  <body>
    <div class="tab-box">
		
      <div class="tab-head">
        <div class="tab-head-div current">标签一</div>
        <div class="tab-head-div">标签二</div>
        <div class="tab-head-div">标签三</div>
        <div class="tab-head-div tab-head-r">标签四</div>
      </div>
	  
      <!--jkdjfk?-->
      <div class="tab-body">
        <div class="tab-body-div current"> 1 </div>
        <div class="tab-body-div"> 2 </div>
        <div class="tab-body-div"> 3 </div>
        <div class="tab-body-div"> 4 </div>
      </div>
	  
    </div>
	
    <script>
	 var tabs=document.getElementsByClassName('tab-head-div');
	 var divs=document.getElementsByClassName('tab-body-div');
	 for(var i=0;i<=tabs.length;i++){
		 tabs[i].onmouseover=function(){
			 
			for(var j=0;j<divs.length;j++){
				if(tabs[j]==this){
					divs[j].classList.add('current');
					tabs[j].classList.add('current');
				}
				else{
				
					divs[j].classList.remove('current');
					tabs[j].classList.remove('current');
				}
			} 
		 };
	 }
    </script>
  </body>
</html>

效果如图

一个小小的案例，感觉可以学到的东西不少

css部分

如何设置盒子的宽度使他们刚刚能够凑的整整齐齐，在这个案例中，第一个大盒子设置宽度为383px，加上边界的宽度为2px，注意底下设置的时候两个大盒子边界刚好算上2px，分别设置四个盒子的border-right为1px,第四个盒子border-right设置为0，这样就刚刚好平均分配，也是最美观的效果。

在设置table-body-div的时候，display应该设置成none，然后设置.table-body .current为display:block.设置为块状元素，这一点有点糊涂，不过下次布局的时候也能记住这点

js部分

1.获取标签栏的所有标签部分的元素对象

2.获取标签栏的所有内容对象

3.遍历标签部分的元素对象

4.为标签元素对象添加鼠标滑过事件

5.遍历标签栏的内容元素对象

6.this的指向问题（在这里this指向鼠标指向所在的dom对象）

7.classList的相关操作方法和属性（这里用到add()方法，和remove()方法）