登录  /  注册
首页 > web前端 > H5教程 > 正文

HTML5实现Tab切换(通过js代码)

不言
发布: 2018-08-09 15:09:59
原创
5459人浏览过

这篇文章给大家介绍的内容是关于HTML5实现Tab切换(通过js代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<title>javascript实现Tab切换</title>
<style>
*{padding:0px;margin:0px;}
ul li {
cursor:pointer;
float:left;
width:100px;
height:30px;
line-height:30px;
text-align:center;
background-color:#fff;
border:1px #bbb solid;
border-bottom:none;
}
ul li.fli {
background-color:#ccc;
color:red;
}
ul {
overflow:hidden;
list-style:none;
}
#tab_con {
width:304px;
height:200px;
}
#tab_con p{
width:304px;
height:200px;
display:none;
border:1px #bbb solid;
border-top:none;
text-align:center;
}
#tab_con p.fp {
display:block;
background-color:#ccc;
}
p:not(#tab_con){
padding:20px 0px;
color:blue;
}
</style>
</head>
<body>
<ul id="tab">
<li class="fli">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p id="tab_con">
<p class="fp">这是清华大学的校徽<img  src="images/01.jpg" alt="HTML5实现Tab切换(通过js代码)" ></p>
<p>这是浙江大学的校徽<img  src="images/02.jpg" alt="HTML5实现Tab切换(通过js代码)" ></p>
<p>这是华中科大的校徽<img  src="images/03.jpg" alt="HTML5实现Tab切换(通过js代码)" ></p>
</p>
<script>
var tabs=document.getElementById("tab").getElementsByTagName("li");
var ps=document.getElementById("tab_con").getElementsByTagName("p");
for (var i=0;i<tabs.length;i++) {
tabs[i].onmouseover=function(){
change(this);
}}
function change(obj){
for (var i=0;i<tabs.length;i++){
if(tabs[i]==obj) {
tabs[i].className="fli";
ps[i].className="fp";
}
else {
tabs[i].className="";
ps[i].className=""
} } }
</script>
登录后复制

相关文章推荐:

HTML5属性:margin属性的用法实例

HTML5中div标签的实例代码

HTML5属性:form表单属性的用法实例

以上就是HTML5实现Tab切换(通过js代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号