コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JS+jQueryで簡単なタブを書く例

黄舟
リリース： 2017-10-30 09:34:06
オリジナル
1409 人が閲覧しました

この記事の例では、JS で単純なタブを記述するための具体的なコードを共有します。具体的な内容は次のとおりです

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery选项卡</title>
  <style type="text/css">
  #p1 p{width: 200px;height: 200px;border: 1px red solid;display: none;}
  .active{background:#999;}
  </style>

  <!-- 原生的JS -->
  <script type="text/javascript">
  window.onload=function(){
    var op=document.getElementById(&#39;p1&#39;);
    var aInput=document.getElementsByTagName(&#39;input&#39;);
    var aCon=op.getElementsByTagName(&#39;p&#39;);

    for (var i = 0; i < aInput.length; i++) {

      aInput[i].index=i;

      aInput[i].onclick=function(){
        for (var i = 0; i < aInput.length; i++) {
          aInput[i].className=&#39;&#39;;
          aCon[i].style.display=&#39;&#39;;
        }

        this.className=&#39;active&#39;;
        aCon[this.index].style.display=&#39;block&#39;;
      }
    }
  }
  </script>


  <!-- jquery写法 -->
  <script type="text/javascript" src=&#39;../jquery-3.2.1.min.js&#39;></script>
  <script type="text/javascript">
  $(function(){
    $(&#39;#p1&#39;).find(&#39;input&#39;).click(function(){
      $(&#39;#p1&#39;).find(&#39;input&#39;).attr(&#39;class&#39;,&#39;&#39;);
      $(&#39;#p1&#39;).find(&#39;p&#39;).css(&#39;display&#39;,&#39;none&#39;);
      $(this).attr(&#39;class&#39;,&#39;active&#39;);
      $(&#39;#p1&#39;).find(&#39;p&#39;).eq($(this).index()).css(&#39;display&#39;,&#39;block&#39;);
    })
  })
  </script>
</head>
<body>
  <p id="p1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <p style="display: block;">11111</p>
    <p>22222</p>
    <p>33333</p>
  </p>
</body>
</html>
ログイン後にコピー

以上がJS+jQueryで簡単なタブを書く例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript 例
ソース：php.cn
前の記事：JavaScript でのボタンの無効化と有効化による影響の例 次の記事：Vue.jsでコンポーネントを分割する実装方法の紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート