suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie den Tab-Wechsel mit nativem JS

So implementieren Sie den Tab-Wechsel mit nativem JS

迷茫
迷茫Original
2017-03-26 17:27:421543Durchsuche

Realisieren Sie den Tabellenwechsel durch natives js

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
.main {width:400px; margin:0 auto;}
#title {height:30px; line-height:30px;}
#title span {float:left; width:120px; height:30px; margin-right:5px; color:#333; background:#eee; text-align:center; cursor:pointer; font-weight:bold;}
#title span.on {background:#333; color:#fff;}
#con {background:#fafafa; height:200px; border-top:2px solid #333;}
#con ul {display:none; padding:10px;}
#con ul.on {display:block;}
#con ul li {height:24px; line-height:24px; border-bottom:1px dotted #ccc; text-indent:10px;}
</style>
</head>
<body>
<p class="wrapper">
<h1>原生javascript效果：选项卡切换</h1>
<p class="main">
  <h4 id="title">
  <span class="on">jquery</span>
  <span>javascript</span>
  <span>css</span>
  </h4>
  <p id="con">
<ul class="on">
<li><a href="#">jquery选项卡</a></li>
<li><a href="#">jquery焦点图</a></li>
<li><a href="#">jquery表单验证</a></li>
<li><a href="#">jquery特效</a></li>
</ul>
<ul>
<li><a href="#">原生javascript</a></li>
<li><a href="#">javascript特效</a></li>
<li><a href="#">javascript笔记</a></li>
</ul>
<ul>
<li><a href="#">css sprites</a></li>
<li><a href="#">css命名规则</a></li>
<li><a href="#">css font属性</a></li>
<li><a href="#">css background属性</a></li>
</ul>
 </p>
   </p>
</p>
<script type="text/javascript">
var oTitle = document.getElementById(&#39;title&#39;);
var aSpan = oTitle.getElementsByTagName(&#39;span&#39;);
var oCon = document.getElementById(&#39;con&#39;);
var aUl = oCon.getElementsByTagName(&#39;ul&#39;);
var i = 0;
for(i=0; i<aSpan.length; i++) {
    aSpan[i].index = aUl[i].index = i;
    aSpan[i].onclick = function () {
for(i=0; i<aSpan.length; i++) {
aSpan[i].className = &#39;&#39;;
aUl[i].className = &#39;&#39;;
}
this.className = &#39;on&#39;;
aUl[this.index].className = &#39;on&#39;;
    }
}
</script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Tab-Wechsel mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Verstehen Sie genau, warum js manchmal fehlschlägt, wenn es im Kopf platziert wirdNächster Artikel：Verstehen Sie genau, warum js manchmal fehlschlägt, wenn es im Kopf platziert wird

In Verbindung stehende Artikel

Mehr sehen