通过js实现TAB切换
1年前
超过530天
温馨提示
本文最后更新于2023年04月11日，已超过530天没有更新，若内容或图片失效，请留言反馈。
原始代码来自网络收集的，具体来源搞忘了，如果有人知道的话可以下方评论，我会添加上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ccc</title>
<style>
.xm-wx-tad {
width: 100%;
margin: 0;
background: aliceblue;
}
.xm-wx-tad .xm-wx-tab-title{
background: #7d7d7d;
}
.xm-wx-tad a {
width: calc(33.333% - 30px);
background: yellow;
display: inline-block;
text-align: center;
padding: 10px;
margin: 5px;
}
.xm-wx-tad .xm-wx-tab-content{
width: 100%;
display: none;
padding: 10px;
}
.xm-wx-tad a.checked {
background:red;
color:#ffffff;
}
</style>
</head>
<body>
<div id="xm-wx-tad" class="xm-wx-tad">
<div class="xm-wx-tab-title">
<a>导航1</a><a>导航2</a><a>导航3</a><a>导航4</a>
</div>
<span class="xm-wx-tab-content">内容1</span>
<span class="xm-wx-tab-content">内容2</span>
<span class="xm-wx-tab-content">内容3</span>
<span class="xm-wx-tab-content">内容4</span>
</div>
<script>
window.onload = function() {
var oTad = document.getElementById('xm-wx-tad'),
a = oTad.querySelector(".xm-wx-tab-title").getElementsByTagName('a'),
nei = oTad.getElementsByTagName('span');
xmwxfor(oTad,a,nei)
}
function xmwxfor(oTad,a,nei){
for (i = 0; i < a.length; i++) {
nei['0'].style.display = 'block'
a['0'].className = 'checked'
a[i].index = i
a[i].onclick = function() {
for (b = 0; b < a.length; b++) {
a[b].className = ''
nei[b].style.display = 'none'
}
this.className = 'checked'
nei[this.index].style.display = 'block'
}
}
}
</script>
</body>
</html>
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
