点击切换的萌萌哒tab选项卡

最新推荐文章于 2023-09-05 16:07:18 发布

JrainL

最新推荐文章于 2023-09-05 16:07:18 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/u011268586/article/details/45799621

版权

在慕课网看完了关于tab选项卡的制作，于是自己也尝试着去做一个点击切换的tab选项卡。

首先看html布局：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab（即时响应）</title>
<link rel="stylesheet" href="tab样式表.css" type="text/css">
<script src="tab（即时响应）.js"></script>
</head>

<body>
<div class="tab">
	<div id="title" class="title">
    	<ul>
        	<li class="select">第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
        </ul>
    </div>
    <div id="content" class="content">
    	<ul>
        	<li style="display:block">呢个系第一页啊啊啊</li>
            <li style="display:none">呢个系第二页啊啊啊</li>
            <li style="display:none">呢个系第三页啊啊啊</li>
            <li style="display:none">呢个系第四页啊啊啊</li>
        </ul>
    </div>
</div>
</body>
</html>

很简单的布局，没有啥好说的，就是在标签选项title部分和内容content部分分别用li标签来引入内容。

接下来是CSS部分：

@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
li{list-style:none; float:left; margin:0 -1px; border-radius:15px 15px 0 0; font-size:18px;}
a{ text-decoration:none; color:#000;}
.tab{ margin:0 auto;
	  width:410px;
	  height:200px;
	  position:relative;
	  top:120px;}
.tab .title li{transition:width 800ms;}
.tab .title li{ border-top:2px solid #000;
				border-right:2px solid #000;
				border-left:2px solid #000;
				background:#CCC;
				color:#FFF;
				height:33px;
				width:65px;
				line-height:33px;
				text-align:center;
				position:relative;
				left:1px;}
				
.tab .content{ width:400px;
			   height:150px;
			   border:2px solid #000;
			   background:#FFF;
			   position:absolute;
			   top:33.5px;
			   z-index:0;}
			   
.tab .content li{position:absolute;
				left:25%;
				right:25%;
				top:25%;
				bottom:25%;}
					
.tab .title li:hover{ background:#999;
						font-weight:bolder;
						cursor:pointer;}
						
				
.tab .title .select{width:140px;
					height:48px;
					background:#FFF;
					color:#000;
					font-weight:bolder;
					bottom:14px;
					z-index:1;}
	
.tab .title .select:hover{ background:#FFF;}

哈哈，对自己的代码格式还是挺满意的，起码不会一眼看上去就乱七八糟~

关键的技术其实就是position定位咯，content部分是四边框，而title部分是没有下边框却带底色，只要设置z-index就可以把title覆盖在content上面，把它的上边框给覆盖住，实现“被选中”的效果。

最后是JS部分，很精彩：

// JavaScript Document
window.οnlοad=function()
{
//获取所有title和content元素
var titles=document.getElementById('title').getElementsByTagName('li'),
	contents=document.getElementById('content').getElementsByTagName('li');
//遍历所有title元素
for(var i=0;i<titles.length;i++)
	{
	titles[i].id=i;
	titles[i].οnclick=function()
		{
		var that=this;
		for(var j=0;j<titles.length;j++){
			titles[j].className='';
			contents[j].style.display='none';}
		this.className='select';
		contents[that.id].style.display='block';
		}
		
	}
}

思路：在CSS中规定好被选中的tltle的效果（为被选中的title添加一个叫select的类名），通过JS遍历title中所有的li并为其加上id，通过id进行class的设置，样式的切换等。

学习很多东西，从布局到定位，再到JS的交互，一个tab的制作真的能够学习到许多东西，前端路漫漫，努力加油！

明天学习延时的tab~