js 标签页

最新推荐文章于 2024-01-02 20:38:51 发布

qq_38674970

最新推荐文章于 2024-01-02 20:38:51 发布

阅读量246

点赞数 1

分类专栏： js学习文章标签：前端 javascript 标签

js学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="images/index.css">
</head>
<body>
	<div class="tabs">
			<li class='on'>教育</li>
			<li>培训</li>
			<li>出国</li>
	</div>
	<div class="content">
		<div class='show'>1</div>
		<div>2</div>
		<div>3</div>
	</div>
		<script src="images/index.js"></script>
</body>
</html>

    *{
        list-style:none;
        padding:0;
        margin:0;
    }
.tabs{
    width: 266px;
    height: 35px;
    background-color: #f4f4f4;
    text-align: center;
    }
    .tabs  li{
    float: left;
    line-height: 35px;
    height: 35px;
    text-align: center;
    width: 80px;
    }
    .tabs .on{
         background-color: white;
    }
    .content{
        height: 20px;
        width: 266px;
    }
    .content div{
        display:none;
        text-align: center;
        background-color:pink;
    }
      .content .show{
        display:block;
    }

	var tabs=document.getElementsByClassName('tabs')[0].getElementsByTagName('li');
	var content=document.getElementsByClassName('content')[0].getElementsByTagName('div');

	for(var i=0;i<3;i++){
		tabs[i].οnmοuseοver=changeTab;
	}
	function changeTab(){
		for(var i=0;i<3;i++){
			if(tabs[i]===this){
				tabs[i].className="on";
				content[i].className="show"
			}else{
				tabs[i].className=" ";
				content[i].className=" "	
			}
		}
	}

简单的标签页

qq_38674970

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 标签页

Document 教育培训出国 1 2 3 *{ list-style:none; padding:0; margin:0; }.tabs{ width: 266px; height: 35px; background-color: #f4
复制链接

扫一扫

专栏目录