How to use native js to implement tab switching-JS Tutorial-php.cn

How to use native js to implement tab switching

迷茫

Release： 2017-03-26 17:27:42

Original

1523 people have browsed it

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>

Copy after login

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!