ホームページ > 記事 > ウェブフロントエンド > ネイティブjsを使ってタブ切り替えを実装する方法

ネイティブjsを使ってタブ切り替えを実装する方法

迷茫オリジナル: 2017-03-26 17:27:421460ブラウズ

ネイティブ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>

以上がネイティブjsを使ってタブ切り替えを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js を head に配置すると失敗することがある理由を深く理解する次の記事：js を head に配置すると失敗することがある理由を深く理解する

続きを見る