HTMLタグの属性class_javascriptスキルを取得してJavaScriptで複数のタブを実装する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

HTMLタグの属性class_javascriptスキルを取得してJavaScriptで複数のタブを実装する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

class htmlタグ javascript 属性

この記事の例では、JavaScript が HTML タグの属性クラスを取得して複数のタブを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>原生javascript通过获取html标签属性class实现多选项卡</title>
    <style type="text/css">
      .tab {
        clear: both;
        margin: 20px auto;
        padding: 10px;
        width: 680px;
        overflow: hidden;
      }
      .tab .tab-menu {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .tab .tab-menu li {
        display: inline;
        margin: 0 2px 0 0;
      }      
      .tab .tab-menu li a {
        padding: 0 1em;
        text-decoration: none;
        color: #a80;
        background: #fe5;
      }
      .tab .tab-menu li a:hover {
        background: #fc0;
        color: #540;
      }
      .tab .tab-menu .active {
      }
      .tab .tab-menu .active a {
        padding-bottom: 2px;
        font-weight: bold;
        color: black;
        background: #fc0;
      }
      .tab .tab-panel {
        padding: 1em;
        border: 2px solid #fc0;
        background: #fff;
      }
      .tab .tab-panel h2 {
        font-size: 1.5em;
        color: #fc0;
      }
      .tab .tab-none {
        display: none;
      }
    </style>
    <script type="text/javascript">      
      function Tab(style, scope){
        this.oItem = this.getByClass(style, scope);
        this.init();
      }
      Tab.prototype = {
        init: function(){
          var that = this, menu, m;
          for(var i = 0, len = this.oItem.length; i < len; i++){
            menu = this.oItem[i].getElementsByTagName('li');
            for(var j = 0, mLen = menu.length; j < mLen; j++){
              m = menu[j];
              m.index = j;
              m.onmouseover = function(){that.focus(this);}
            }
          }
        },
        focus: function(o){
          var par = o.parentNode.parentNode, panel = par.getElementsByTagName('div'), 
            btn = par.getElementsByTagName('li'), len = btn.length;
          for(var i = 0; i < len; i++){
            btn[i].className = '';
            panel[i].className = this.changeClass(panel[i].className, 'tab-none', true);
          }
          o.className = 'active';
          panel[o.index].className = this.changeClass(panel[o.index].className, 'tab-none', false);
        },
        changeClass: function(cl, cl2, add){
          var flag;
          if(cl.match(cl2) != null) flag = true;
          if(add ^ flag) return flag &#63; cl.replace(cl2, '') : cl += ' ' + cl2;
          return cl;
        },
        getByClass: function(cla, obj){
          var obj = obj || document, arr = [];
          if(document.getElementsByClassName){
            return document.getElementsByClassName(cla);
          } else {
            var all = obj.getElementsByTagName('*');
            for(var i = 0, len = all.length; i < len; i++){
              if(all[i].className.match(cla) != null) arr.push(all[i]);
            }
            return arr;
          }
        }
      }
      window.onload = function(){
        new Tab('tab-menu', null);
      }
    </script>
  </head>
  <body>
    <div class="tab">
      <ul class="tab-menu">
        <li class="active"><a href="">111</a></li>
        <li><a href="">122</a></li>
        <li><a href="">133</a></li>
      </ul>
      <div class="tab-panel">
        111
      </div>
      <div class="tab-panel tab-none">
        122
      </div>
      <div class="tab-panel tab-none">
        133
      </div>
    </div>
    <div class="tab">
      <ul class="tab-menu">
        <li class="active"><a href="">211</a></li>
        <li><a href="">222</a></li>
        <li><a href="">233</a></li>
      </ul>
      <div class="tab-panel">
        211
      </div>
      <div class="tab-panel tab-none">
        222
      </div>
      <div class="tab-panel tab-none">
        233
      </div>
    </div>
    <div class="tab">
      <ul class="tab-menu">
        <li class="active"><a href="">311</a></li>
        <li><a href="">322</a></li>
        <li><a href="">333</a></li>
      </ul>
      <div class="tab-panel">
        311
      </div>
      <div class="tab-panel tab-none">
        322
      </div>
      <div class="tab-panel tab-none">
        333
      </div>
    </div>
  </body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7364

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

jQueryを使用して要素のクラス名を置換する Feb 24, 2024 pm 11:03 PM

jQuery は、Web 開発で広く使用されている古典的な JavaScript ライブラリで、イベントの処理、DOM 要素の操作、Web ページ上でのアニメーションの実行などの操作を簡素化します。 jQueryを使っていると要素のクラス名を置き換える場面がよくありますが、この記事ではその実践的な方法と具体的なコード例を紹介します。 1.removeClass() メソッドと addClass() メソッドを使用する jQuery には、削除用の RemoveClass() メソッドが用意されています。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

PHPの文字列からHTMLタグを削除するにはどうすればよいですか? Mar 23, 2024 pm 09:03 PM

PHP は、Web サイト開発やバックエンドアプリケーション開発で広く使用されている、一般的に使用されるサーバー側スクリプト言語です。 Web サイトやアプリケーションを開発するとき、文字列内の HTML タグを処理する必要がある状況によく遭遇します。この記事では、PHP を使用して文字列から HTML タグを削除する方法と、具体的なコード例を紹介します。なぜ HTML タグを削除する必要があるのですか? HTML タグは、ユーザー入力やデータベースから取得したテキストを処理するときによく使用されます。テキストを表示するときにこれらの HTML タグを削除したい場合があります。

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

PHP クラスの使用法の詳細な説明: コードをより明確で読みやすくします。 Mar 10, 2024 pm 12:03 PM

PHP コードを記述するとき、クラスを使用するのは非常に一般的な方法です。クラスを使用すると、関連する関数とデータを 1 つのユニットにカプセル化できるため、コードがより明確になり、読みやすく、保守しやすくなります。この記事では、PHPClass の使用法を詳しく紹介し、クラスを適用して実際のプロジェクトでコードを最適化する方法を読者がよりよく理解できるように、具体的なコード例を示します。 1. クラスの作成と使用 PHP では、キーワード class を使用してクラスを定義し、クラス内のプロパティとメソッドを定義できます。

CSSのbottom属性構文 Feb 21, 2024 pm 03:30 PM

CSS の Bottom 属性の構文とコード例 CSS では、bottom 属性は要素とコンテナの下部の間の距離を指定するために使用されます。親要素の下部を基準とした要素の位置を制御します。ボトム属性の構文は次のとおりです: element{bottom:value;} ここで、element はスタイルが適用される要素を表し、value は設定されるボトム値を表します。 value にはピクセルなどの特定の長さの値を指定できます

ハースストーンの絶望の糸の属性の紹介 Mar 20, 2024 pm 10:36 PM

絶望の糸はBlizzard Entertainmentの名作『ハースストーン』に登場するレアカードで、カードパック「ウィズベインのワークショップ」で入手できるチャンスがあります。 100/400の秘術ダストポイントを消費して、ノーマル/ゴールドバージョンを合成できます。ハースストーンの絶望の糸の属性の紹介: ウィズベインのワークショップカードパックで確率で入手できるか、秘術の粉塵を通じて合成することもできます。レアリティ：レア種類：呪文クラス：デスナイトマナ：1 効果：すべてのミニオンに断末魔を与える：すべてのミニオンに1ダメージを与える

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

See all articles

HTMLタグの属性class_javascriptスキルを取得してJavaScriptで複数のタブを実装する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック