Home > Article > Web Front-end > Javascript implements tab switching effect

Javascript implements tab switching effect

高洛峰Original: 2017-03-24 13:43:071667browse

There are many various page effects on the current page. Commonly used ones include pop-up layer effect, seamless scrolling effect, and tab switching effect. Today I will share a tab switching effect written by myself using native javascript. Due to my limited skills, please point out any problems.
The rendering is as follows:

html code:

<!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 code:

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;; 
} 
} 
}

Note:
1. Title For example, homepage, technology, life and works are in h2 tags.
2. Use the class named on to display the current title. If you change it to another class such as selected, you need to modify the corresponding content in tabs.js.
3. The content corresponding to the title is in the p tag. There can be no more p tags within p tags.
PS: These are some results I wrote casually based on the javascript knowledge I learned when I was bored.

For more articles related to javascript implementing tabs switching effect, please pay attention to the PHP Chinese website!

WeChat Mini Program: How to implement tabs tab effect example

WeChat Mini Program tabs effect implementation

Simple and stylish pure CSS3 Tabs option card effects

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The simplest tab switching based on javascriptNext article：The simplest tab switching based on javascript

See more

Javascript implements tab switching effect

Related articles