HTML5实现Tab切换（通过js代码）

来源:网络整理作者: 发布时间:2020-12-22 10:01

这篇文章给大家介绍的内容是关于HTML5实现Tab切换（通过js代码），有一定的参考价值，有需要的朋友可以参考一下，...

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

以上就是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=https://www.ym97.com/"images/01.jpg"></p> <p>这是浙江大学的校徽<img src=https://www.ym97.com/"images/02.jpg"></p> <p>这是华中科大的校徽<img src=https://www.ym97.com/"images/03.jpg"></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>

相关热词： HTML HTML5

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/7074.shtml

上一篇：HTML5属性：margin属性的用法

下一篇：HTML5中标签和常用规则有哪

用react的ReactCSSTransitionGroup插件	微软IE9平台预览版完整支持H
IE9正式版无论从性能提升还是	HTML5 学习总结（四）canvas绘图
canvas与html5实现视频截图成果	html5 canvas常用api总结(二)画图
而不是元素本身	可以加我的HTML5前端交流群11
我们先来看一下实现效果：	实现代码：这里写代码片h1
HTML5生拖放实例分析	如何在html页面中实现查找功能
HTML5 和 Flash 区别？	你有认真学习HTML5吗？那么你应
css怎么实现不定宽水平居中	Canvas跨域的解决方案介绍