Home > Article > Web Front-end > How to use native js to implement tab switching

How to use native js to implement tab switching

迷茫Original: 2017-03-26 17:27:421501browse

Realize table switching through native 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>

The above is the detailed content of How to use native js to implement tab switching. For more information, please follow other related articles on the PHP Chinese website!

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：Deeply understand why js sometimes fails when placed in the headNext article：Deeply understand why js sometimes fails when placed in the head

See more

How to use native js to implement tab switching

Related articles