Tab选项卡切换

最新推荐文章于 2020-10-16 20:09:11 发布

「已注销」

最新推荐文章于 2020-10-16 20:09:11 发布

阅读量262

点赞数

分类专栏： JavaScript CSS3 HTML

本文链接：https://blog.csdn.net/bang_2018/article/details/85231938

版权

JavaScript 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

Tab选项卡切换类型

点击切换
滑动切换

实现选项卡的切换，可以用JS来实现对页面CSS隐藏和显示形式的控制，从而达到切换的效果。下面介绍点击切换，滑动切换原理一样，只需把JS中onclick改成onmouseover

页面布局：

布局分成选项卡标题和内容两部分：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tab选项卡</title>
</head>
<body>
<!--页面布局-->
<div id="tab">
		<ul>    //标题
			<li class="on">我的关注</li>
			<li class="off">推荐</li>
			<li class="off">导航</li>
		</ul>
	<div id="page1" class="show">  //内容
		<a href="#">我的导航</a><br/>
		<a href="#">自定义</a><br/>
	</div>
	<div id="page2" class="hide">
		<a href="#">推荐一</a><br/>
		<a href="#">推荐二</a><br/>
		<a href="#">推荐三</a><br/>
	</div>
	<div id="page3" class="hide">
		<a href="#">天猫商城</a><br/>
		<a href="#">苏宁易购</a><br/>
		<a href="#">京东商城</a><br/>
	</div>
</div>
</body>
</html>

CSS表现样式：

    *{
     	margin:0;
     	padding:0;
     	font:normal 12px "微软雅黑";
     	color:#000000;
    }
    ul{list-style-type: none;}
    a{text-decoration: none;}
    #tab{
     	width: 800px;
     	height:300px;
     	margin: 20px auto;
     	border: 3px solid #F9F7F7;
     }
	#tab ul{
		border-bottom: 2px solid #F9F7F7;
     	height: 40px;
	}
    #tab ul li{
    	display: inline-block;
     	float: left;
     	width: 70px;
     	line-height: 40px;
     	text-align: center;

    }
    #tab ul li:hover{
    	cursor: pointer;
     	color: white;
     	background-color: #DED8D8;
    }
    #tab ul li.on{
    	display: block;
		height: 40px;
     	border-bottom :3px solid #F9F7F7; 
     	background: #9a9da2;
    }
    #tab div{
    	line-height: 24px;
		padding: 1px; 
    }

    #tab div li{
     	height: 30px;
     	line-height: 30px;
     	text-indent: 8px;
     }

    .show{
		display: block;
	}

    .hide{
    	display:none;
    }

JS实现点击切换控制：

当鼠标点击某一选项时，相应的内容div显示，其余选项内容div隐藏，运用一个循环就可以实现选项卡的切换了。

window.onload=function(){
			var myTab=document.getElementById("tab");
			var myUl=myTab.getElementsByTagName("ul")[0];
			var myLi=myUl.getElementsByTagName("li");
			var myDiv=myTab.getElementsByTagName("div");
			for(var i=0;i<myLi.length;i++){
				myLi[i].index=i;
				myLi[i].onclick=function(){
					for(var j=0;j<myLi.length;j++){
						myLi[j].className="off";
						myDiv[j].className="hide";
					}
					this.className="on";
					myDiv[this.index].className="show";
				}
			}
		}

如果要实现自动切换和延迟切换可以在JS中加上计时器setInterval或setTimeout，本节内容不再论述。

「已注销」

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Tab选项卡切换

Tab选项卡切换类型点击切换滑动切换实现选项卡的切换，可以用JS来实现对页面CSS隐藏和显示形式的控制，从而达到切换的效果。下面介绍点击切换，滑动切换原理一样，只需把JS中onclick改成onmouseover页面布局：布局分成选项卡标题和内容两部分：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta cha...
复制链接

扫一扫

专栏目录