合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

如何切换TAB的代码实例

  • 时间:2016-06-06
  • 发布:合肥web培训
  • 来源:达内新闻

合肥web培训专家引用一个实例,讲解如何轻松切换tab。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="reset.css">
<style>
body{padding-top: 30px;}

head{overflow: hidden; margin:0 auto; width: 600px;}
 
#head span{width: 198px; height: 38px; line-height: 38px; text-align: center; border: 1px solid #000; float: left; font-size: 24px; cursor: pointer;}
#head span:hover{color: red;}
#content{width: 598px; height: 238px; border: 1px solid #000; margin:0 auto; overflow: hidden;}
#content li{width: 598px; height: 238px; line-height: 238px; text-align: center; font-size: 60px; display: none;}
/*当前显示样式*/
#head .select{background: #ccc;}
#content .show{display: block;}</style>
</head>
<body>
<h2 id="head">
<span class="select">标题1</span>
<span>标题2</span>
<span>标题3</span>
<span>标题4</span>
<span>标题5</span>
</h2>
<ul id="content">
<li class="show">内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</body>
<script>
var spans=document.getElementsByTagName('span');
var lis=document.getElementsByTagName('li');
//给所有的标题绑定一个点击事件
for (var i = 0; i < spans.length; i++) {
spans[i].a=i;//为每一标题保存一个下标
spans[i].onclick=function (){
for (var v = 0; v < spans.length; v++) {
spans[v].className='';
lis[v].className='';
};
//alert(this.index);
spans[this.a].className='select';
lis[this.a].className='show';
}
};
</script>
</html>
上一篇:web前端开发冷知识
下一篇:网页布局基础知识

JavaScript是真正的 OOP 语言吗?

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

选择城市和中心
贵州省

广西省

海南省