Rumah > Artikel > hujung hadapan web > 如何使用原生js实现tab切换

如何使用原生js实现tab切换

迷茫asal: 2017-03-26 17:27:421497semak imbas

通过原生js实现table切换

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

Atas ialah kandungan terperinci 如何使用原生js实现tab切换. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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：深入理解js为什么放到head中有时候失效Artikel seterusnya：javascript 常用api

Artikel berkaitan

Lihat lagi