代码相当简洁、简单易懂,就不多废话了。
直接奉上代码:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<title>js简单选项卡</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/demo.js">
<style type="text/css">
*{ font-size: 14px;margin: 0px;}
a{color:#a0b3d6;text-decoration: none;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:350px;}
.tabs-nav a{background:#eaf0fd; line-height:30px;padding:0px 20px 0px 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6; float:left;}
.tabs-nav .on{background:white; border-bottom:1px solid white; position:relative;}
.tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;}
.tabs-content_hide{display: none;}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:;" class="on">首页</a>
<a href="javascript:;">技术</a>
<a href="javascript:;">生活</a>
<a href="javascript:;">作品</a>
</h2>
<div style="clear:both;"></div>
<p class="tabs-content">首页</p>
<p class="tabs-content_hide">技术</p>
<p class="tabs-content_hide">生活</p>
<p class="tabs-content_hide">作品</p>
</div>
</body>
<footer></footer>
</html>
------demo.js---------------
复制代码 代码如下:
window.onload=function(){
tabs("tabs","mouseover");
}
function tabs(id,trigger){
var tabBtn = document.getElementById(id).getElementsByTagName("h2")[0].getElementsByTagName("a");
var tabsContent = document.getElementById(id).getElementsByTagName("p");
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].index = i;
if(trigger=='mouseover'){
tabBtn[i].onmouseover=function(){
clearClass();
this.className="on";
showContent(this.index);
}
}
function showContent(n){
for (var i=0; i<tabsContent.length ;i++) {
tabsContent[i].index = i;
tabsContent[i].className = "tabs-content_hide";
}
tabsContent[n].className="tabs-content";
}
function clearClass(){
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].className="";
}
}
}
}
是不是很简单就实现了选项卡的切换效果呢,小伙伴们自己美化下就可以用到自己项目中去了。
javascript,选项卡
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 外媒:《死亡岛2》或是今年PS+2档最受欢迎游戏
- 群星.1997-世纪之歌第二辑6CD【宝丽金】【WAV+CUE】
- 邵萱.1997-是是非非【捷登】【WAV+CUE】
- 巫启贤.1998-我是你的【风格】【WAV+CUE】
- 【原神手游】「月草的赐慧」祈愿
- 【原神手游】「赤团开时」祈愿
- 【原神手游】「法器·千夜浮梦」介绍
- 陈立农《青春为名 上部曲 - 恋》[FLAC/分轨][290.58MB]
- 张乔西《明星》[320K/MP3][55.23MB]
- 张乔西《明星》[FLAC/分轨][143.08MB]
- 《P3R:Episode Aegis》:重复爬塔的悲伤
- 《公会传说:遗落的世界》EA版评测:怀旧感CRPG还在追我
- 诛仙老玩家会喜欢《诛仙世界》吗?
- ABC唱片-《母帶直刻神奇黑胶CD》[FLAC+CUE]
- 柏菲·李一凤《真爱过关》限量开盘母带ORMCD[低速原抓WAV+CUE]