原生JS实现tab切换

最新推荐文章于 2024-04-19 05:41:57 发布

露露mary

最新推荐文章于 2024-04-19 05:41:57 发布

阅读量2.7k

点赞数 3

分类专栏：代码片段文章标签： js

本文链接：https://blog.csdn.net/qq_34843861/article/details/82156215

版权

代码片段专栏收录该内容

15 篇文章 0 订阅

订阅专栏

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab切换</title>
	<style type="text/css">
     /* CSS样式制作 */  
    * {margin:0px;padding:0px;font:12px normal "microsoft yahei";}
	a {text-decoration: none;color:black;display:block;}
	a:hover {text-decoration:none;color:#336699;}
    #tabs ul {
    	list-style:none;
    	display:block;
    	height:30px;
    	line-height:30px;
    	border-bottom:2px solid saddlebrown;
    	width:300px;}
    #tabs ul li {
    	float:left;
    	cursor:pointer;
    	width:60px;
    	height:28px;
    	line-height:28px;
    	margin:0 3px;
    	border:1px solid #aaaaaa;
    	border-bottom:none;
    	text-align:center;
		}
 	#tabs ul li.on {
        border-top:2px solid saddlebrown;  
        border-bottom: 2px solid #fff;  
        }
    #tabs div {
    	width:290px;
        height:120px;  
        line-height: 25px;  
        border:1px solid #336699;  
        border-top:none;  
        padding:5px;  
        }  
    .hide {  
        display:none;  
        } 
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
         window.onload = function(){  
             var oTab = document.getElementById("tabs");  
             var oUl = oTab.getElementsByTagName("ul")[0];  
             var oLis = oUl.getElementsByTagName("li");  
             var oDivs= oTab.getElementsByTagName("div");  
  
             for(var i= 0;i < oLis.length;i++){  
                 oLis[i].index = i;  
                 oLis[i].onclick = function() {  
                     for(var n= 0;n< oLis.length ;n++){  
                         oLis[n].className = "";  
                         oDivs[n].className = "hide";  
                     }  
                     this.className = "on";  
                     oDivs[this.index].className = "";  
                 }  
             };  
         }  
    
    </script>
</head>
<body>
	<div id="tabs">
		<ul>
			<li class="on">房产</li>
			<li class="off">家居</li>
			<li class="off">二手房</li>
		</ul>
		<div id = "firstPag" class = "show">
			<a href="#">275万购昌平邻铁三居 总价20万买一居</a>
	    	<a href="#">200万内购五环三居 140万安家东三环</a>
	    	<a href="#">北京首现零首付楼盘 53万购东5环50平</a>
	    	<a href="#">京楼盘直降5000 中信府 公园楼王现房</a>
		</div>
  		<div id = "secondPag" class = "hide">
  			<a href="#">40平出租屋大改造 美少女的混搭小窝</a>
	     	<a href="#">经典清新简欧爱家 90平老房焕发新生</a>
	     	<a href="#">新中式的酷色温情 66平撞色活泼家居</a>
	     	<a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a>
		</div>
		<div id = "thirdPag" class = "hide">
			<a href="#">通州豪华3居260万 二环稀缺2居250w甩</a>
     		<a href="#">西3环通透2居290万 130万2居限量抢购</a>
     		<a href="#">黄城根小学学区仅260万 121平70万抛!</a>
     		<a href="#">独家别墅280万 苏州桥2居优惠价248万</a>
		</div>
	</div>
</body>
</html>

露露mary

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
原生JS实现tab切换

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;tab切换&lt;/title&gt; &lt;style type="
复制链接

扫一扫