ホームページ > 記事 > ウェブフロントエンド > jsとjqueryをそれぞれ使用してタブページ機能を実装する方法

jsとjqueryをそれぞれ使用してタブページ機能を実装する方法

高洛峰オリジナル: 2016-12-06 14:39:161451ブラウズ

この記事の例では、js と jquery がそれぞれタブページ関数を実装する方法を説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

最初にスタイルとHTMLタグをリストします

<style type="text/css">
    *{margin: 0;padding: 0;}
    #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 20px;}
    #container div{display: none; width: 303px; height: 300px; border: 1px solid #ddd; }
    #container .ssd{display: block;}
    .ssl{background: #abcdef;}
</style>
</head>
<body>
  <div id="tab">
    <ul id="myul">
      <li class="ssl">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div id="container">
      <div class="ssd">woshi1</div>
      <div>woshi2</div>
      <div>woshi3</div>
    </div>
  </div>
</body>

次にタブタグを実装するためのネイティブJSコード

<script type="text/javascript">
var ul = document.getElementById(&#39;myul&#39;);
var li = ul.getElementsByTagName(&#39;li&#39;);
var con = document.getElementById(&#39;container&#39;);
var div = con.getElementsByTagName(&#39;div&#39;);
var len = li.length;
for (var i = 0; i < len; i++) {
li[i].index = i;
li[i].onclick=choose;
li[i].onmouseover = choose;
};
function choose(){
for(var j = 0; j < len; j++) {
    li[j].className = &#39;&#39;;
    div[j].style.display = &#39;none&#39;;
  }
  this.className = &#39;ssl&#39;;
  div[this.index].style.display=&#39;block&#39;;
}
</script>

次に、jqueryを使用してコードを次のように実装します

$(&#39;#myul li&#39;).click(choose);
$(&#39;#myul li&#39;).hover(choose);
function choose(){
  $(this).addClass(&#39;ssl&#39;).siblings().removeClass(&#39;ssl&#39;);
  $(&#39;#container div&#39;).eq($(this).index()).show().siblings().hide();
}

実際、この関数は次のように簡略化できます:

function choose(){
  $(this).addClass(&#39;ssl&#39;).siblings().removeClass(&#39;ssl&#39;).parent().next().children().eq($(this).index()).show().siblings().hide();
}

声明：

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

前の記事：jQueryとJavaScriptのノード挿入方法の比較次の記事：jQueryとJavaScriptのノード挿入方法の比較

続きを見る

jsとjqueryをそれぞれ使用してタブページ機能を実装する方法

関連記事