cari

Rumah >hujung hadapan web >tutorial js >javascript实现tabs选项卡切换效果

javascript实现tabs选项卡切换效果

高洛峰
高洛峰asal
2017-03-24 13:43:071785semak imbas

现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。 
效果图如下： 

javascript实现tabs选项卡切换效果

html代码： 

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>js-tabs</title> 
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> 
<style type="text/css"> 
a{color:#a0b3d6;} 
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;} 
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 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{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;} 
</style> 
</head> 
<body> 
<p id="tabs"> 
<h2 class="tabs-nav clearfix"> 
<a href="javascript:;">首页</a> 
<a href="javascript:;">技术</a> 
<a href="javascript:;">生活</a> 
<a href="javascript:;">作品</a> 
</h2> 
<p>首页首页首页首页首页首页首页首页首页首页</p> 
<p class="tabs-content hide">技术技术技术技术技术技术技术技术技术技术</p> 
<p class="tabs-content hide">生活生活生活生活生活生活生活生活生活生活</p> 
<p class="tabs-content hide">作品作品作品作品作品作品作品作品作品作品</p> 
</p> 
<br/><br/> 
<p id="tabs2"> 
<h2 class="tabs-nav clearfix"> 
<a href="javascript:;">11111</a> 
<a href="javascript:;">22222</a> 
<a href="javascript:;">33333</a> 
</h2> 
<p>11111111111111111111111111111111111</p> 
<p class="tabs-content hide">222222222222222222222222222222222222</p> 
<p class="tabs-content hide">333333333333333333333333333333333333333</p> 
</p> 
</body> 
</html> 
<script type="text/javascript" src="tabs.js"></script> 
<script type="text/javascript"> 
window.onload = function(){ 
tabs(&#39;tabs&#39;,&#39;click&#39;); 
tabs(&#39;tabs2&#39;,&#39;mouseover&#39;); 
} 
</script>

javascript 代码： 

function tabs(id,trigger){ 
var tabsBtn = document.getElementById(id).getElementsByTagName(&#39;h2&#39;)[0].getElementsByTagName(&#39;a&#39;); 
var tabsContent = document.getElementById(id).getElementsByTagName(&#39;p&#39;); 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].index = i; 
if(trigger == &#39;click&#39;){ 
tabsBtn[i].onclick = function(){ 
clearClass(); 
this.className = &#39;on&#39;; 
showContent(this.index); 
} 
}else if(trigger == &#39;mouseover&#39;){ 
tabsBtn[i].onmouseover = function(){ 
clearClass(); 
this.className = &#39;on&#39;; 
showContent(this.index); 
} 
} 
} 
function showContent(n){ 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsContent[i].className = &#39;hide&#39;; 
} 
tabsContent[n].className = &#39;tabs-content&#39;; 
} 
function clearClass(){ 
for(var i = 0,len = tabsBtn.length; i < len; i++){ 
tabsBtn[i].className = &#39;&#39;; 
} 
} 
}

注意： 
1、标题如首页、技术、生活和作品是在 h2 标签中。 
2、显示当前标题使用 class 名为 on 的类，如果修改成其他 class 的如 selected，就需要修改 tabs.js 中相对应的内容。 
3、标题所对应的内容是在 p 标签中。p 标签中不能再有 p 标签。 
PS：这是本人闲着无聊，通过自己所学的 javascript 知识，随意写的一些效果。

更多javascript实现tabs选项卡切换效果相关文章请关注PHP中文网！

相关文章：

微信小程序：如何实现tabs选项卡效果示例

微信小程序 tabs选项卡效果的实现

简约时尚的纯CSS3 Tabs选项卡特效

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：基于javascript实现最简单选项卡切换Artikel seterusnya：JQuery 选项卡效果(JS与HTML的分离)

Artikel berkaitan

Lihat lagi