<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0;margin:0;}
ul{list-style:none;}
#tab{
width:480px;
margin-top:55px;
margin-left:auto;
margin-right:auto;
border:2px red solid;
}
/*ul下的li的属性*/
ul li{
float: left;
width:160px;
height:60px;
line-height: 60px;
text-align: center;
background-color:grey;
}
/*ul下的li里的a的属性*/
ul li a{
text-decoration: none;
color:black;
}
/*li的active属性*/
li.active{
background-color: aqua;
}
p{
display:none;
height:200px;
text-align: center;
line-height:200px;
background-color: #2b84da;
}
p.active{
display:block;
font-size:36px;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
<script>
var tab_li = document.getElementsByTagName('li');
var tab_content = document.getElementsByTagName('p');
for(var i=0;i<tab_li.length;i++){
//保存变量i的临时值
tab_li[i].index = i;
tab_li[i].onclick = function () {
for(var j=0;j<tab_li.length;j++){
tab_li[j].className = '';
tab_content[j].className = '';
}
this.className = 'active';
tab_content[this.index].className = 'active';
}
}
</script>
</body>
</html>
DOM之选项卡
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:DOM之简单留言板
下一篇:DOM之定时器计时效果
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
easyU之tabs选项卡
Tabs(选项卡) tab1 tab2 ...
ico css html jquery 选项卡 -
关于选项卡
此生何用声声叹,道不尽流年
Javascript -
选项卡
不不
javascript html ide 导航菜单 xml -
EasyUI之选项卡Tabs
1、实例背景 EasyUI选项卡Tabs,获取选中第几个并打印Tabs标签内容2、实现实例 EasyUI之选项卡Tabs ...
css html javascript jquery 选项卡 -
jquery 选项卡功能 jq写选项卡
他
jquery 选项卡功能 选项卡 HTML 选择器 -
gpu能不能帮助跑python
我将对代码进行补充演练,以构建在数据集上训练的任何类型的图像分类器。在这个例子中,我将使用花卉数据集,其中包括102种不同类型的花。需要数据集和代码都可以私信我。 来自花卉数据集的图像和相应标签的示例 Pytorch是机器学习和Python上的免费软件包,非常易于使用。语法模拟numpy,因此,如果你在python中有一些科学计算经验,那么会相当有用的。只需几行代码,就可以下载预先训练的
gpu能不能帮助跑python python accuracy python datasets 下载 数据集 python