Heim > Artikel > Web-Frontend > Einfache reine JS-Implementierung von Click-Switching-TAB-Label-Beispiel_Javascript-Fähigkeiten

Einfache reine JS-Implementierung von Click-Switching-TAB-Label-Beispiel_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:43:341361Durchsuche

Ein Tab-Wechseleffekt, für dessen Implementierung kein jQuery erforderlich ist. Der Code ist einfach und leicht zu verwenden.
Standardmäßig wird der Tab-Effekt angezeigt, wenn die Maus darüber schwebt, und der Onmouseover kann in den Onclick-Klickeffekt geändert werden

Verwendung:

1. Kopieren Sie den CSS-Stil und den Codeteil in der index.html im Anhang an die Stelle, an der Sie ihn benötigen
Verwandte Links: Ein paar Zeilen einfacher jQuery-Code, um den Tab-Switching-Effekt zu erzielen

Renderings anzeigen:

Effektanzeige Quellcode-Download

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击切换选项卡代码</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.tab1{width:401px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;margin:50px auto 0 auto;}
.menu{height:28px;border-right:#cccccc solid 1px;}
.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}
.menu li.off{background:#FFFFFF;color:#336699;font-weight:bold;}
.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
</style>
<script type="text/javascript">
function setTab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var menu = document.getElementById(name+i);
var menudiv = document.getElementById("con_"+name+"_"+i);
if(i==cursel){
menu.className="off";
menudiv.style.display="block";
}
else{
menu.className="";
menudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setTab(name_0,cursel_0);
}

var name_0='one';
var cursel_0=1;
var ScrollTime=3000;//循环周期（毫秒）
var links_len,iIntervalId;
onload=function(){
var links = document.getElementById("tab1").getElementsByTagName('li')
links_len=links.length;
for(var i=0; i<links_len; i++){
links[i].onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}
</script>
</head>
<body>
<div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1" onclick="setTab('one',1)">首页</li>
<li id="one2" onclick="setTab('one',2)">点击看看</li>
<li id="one3" onclick="setTab('one',3)">会自动的</li>
<li id="one4" onclick="setTab('one',4)">我的网站</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1">我的网站</div>
<div id="con_one_2" style="display:none;">JS代码,导航菜单</div>

<div id="con_one_3" style="display:none;">看到效果了吗？？？</div>
<div id="con_one_4" style="display:none;">我的网站我做主</div>
</div>
</div>
<div style="text-align:center;clear:both;"></div>
</body>
</html>

Der obige Inhalt ist ein Beispiel für die Verwendung von einfachem reinem JS zum Wechseln der TAB-Beschriftung durch Klicken. Ich hoffe, dass es für jeden hilfreich ist, JS-Kenntnisse zu erlernen, um Webseiten-Spezialeffekte zu erstellen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Javascript imitiert den Mauszeiger über den Sina-Spielkanal, um das Untermenü „effect_javascript skills“ anzuzeigenNächster Artikel：Javascript imitiert den Mauszeiger über den Sina-Spielkanal, um das Untermenü „effect_javascript skills“ anzuzeigen

In Verbindung stehende Artikel

Mehr sehen