この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. ページを作成する<div class="tab" data-config='{ // タグ内の設定をカスタマイズします "triggerType": "click", "効果": "フェード", 「呼び出す」: 2, 「自動」: 1000 }'> <ul class="tab-nav"> <li class="active"><a href="javascript:void(0);" >ニュース</a></li> <li><a href="javascript:void(0);" >エンターテイメント</a></li> <li><a href="javascript:void(0);" >映画</a></li> <li><a href="javascript:void(0);" >テクノロジー</a></li> </ul> <div class="content"> <div class="content-item current"> <img src="./images/pic1.jpg"> </div> <div class="content-item"> <img src="./images/pic2.jpg"> </div> <div class="content-item"> <img src="./images/pic3.jpg"> </div> <div class="content-item"> <img src="./images/pic4.jpg"> </div> </div> </div> 2. 基本スタイル* { マージン: 0; パディング: 0; } ul、li { リストスタイル: なし; } 体 { 背景: #323232; フォントサイズ: 12px; パディング: 100px; } .タブ{ 幅: 300ピクセル; } .tab .tab-nav { 高さ: 30px; } .tab .tab-nav li { 表示: インラインブロック; 右マージン: 5px; 背景: #767676; 境界線の半径: 3px 3px 0 0; } .tab .tab-nav li a { 表示: ブロック; テキスト装飾: なし; 高さ: 30px; 行の高さ: 30px; パディング: 0 20px; 色: #fff; } .tab .tab-nav li.active { 背景: #fff; 色: #777; } .tab .tab-nav li.active a { 色: #777; } .タブ .コンテンツ { 背景: #fff; 高さ: 200px; パディング: 5px; } .タブ .コンテンツ項目 { 位置: 絶対; 表示: なし; } .tab .content 画像 { 幅: 290ピクセル; 高さ: 200px; } .タブ .コンテンツ .現在 { 表示: ブロック; } 3. 効果4. タブ開発の思考構造図:オブジェクト、パラメータ、メソッドが必要5. jsの練習(関数 () { 機能タブ(タブ) { this.tab = タブ; var _this_ = これ; // デフォルトの設定パラメータ、属性名は二重引用符で囲みます。そうでない場合、parseJSON エスケープは失敗します。this.config = { // マウスのトリガータイプ(クリックまたはマウスオーバー)を定義するために使用されます "トリガータイプ": "マウスオーバー", // コンテンツ切り替え効果を定義するために使用されます。直接切り替えかフェードインとフェードアウト効果か "effect": "default", // 表示するデフォルトのタブ 「呼び出す」: 1, // タブが自動的に切り替わるかどうかを定義し、切り替わるのにかかる時間を指定します "auto": false } // 設定が存在する場合は、元の設定を拡張し、$.extend とマージします。if (this.getConfig()) { this.config を拡張します。 } // マウストリガー関数 var config = this.config; // ストレージ構成、this.config は毎回検索します this.liItem = this.tab.find('.tab-nav li'); // li を取得します this.contentItem = this.tab.find('.content div'); // コンテンツを取得します // クリックされたかどうかを判断します。 。操作時にinvokeメソッドを実行して切り替える if (config.triggerType === 'click') { this.liItem.click(関数() { _this_ を呼び出します($(this)); }); } それ以外 { this.liItem.mouseover(関数() { _this_ を呼び出します($(this)); }); } // 自動切り替え機能 if (this.config.auto) { this.timer = null; this.count = 0; // カウンター this.autoplay(); // マウスが上にあるときに停止し、マウスが離れると続行します this.tab.hover(function () { clearInterval(_this_.timer); // これは this.tab です }、 関数 () { _this_.autoplay(); }) } // デフォルトの表示番号 if (this.config.invoke > 1) { this.invoke(this.liItem.eq(this.config.invoke - 1)); // 直接スイッチ} } タブプロトタイプ = { // 設定パラメータを取得する getConfig: function () { //タブ要素の data-config の内容を取得します。var config = this.tab.attr('data-config'); if (config && config != '') { return $.parseJSON(config); //jsonオブジェクトをjsオブジェクトに変換} else { null を返します。 } }, // 渡されたliを取得して切り替えるinvoke: function (li) { var index = li.index(); // li のインデックスを取得します。 var liItem = this.liItem; var contentItem = this.contentItem; li.addClass('active').siblings().removeClass('active'); // アクティブを自身に追加し、他の兄弟を削除します // フェードインとフェードアウトまたはデフォルト var effect = this.config.effect; if (効果 === 'デフォルト') { contentItem.eq(index).addClass('current').siblings().removeClass('active'); } それ以外 { contentItem.eq(index).fadeIn().siblings().fadeOut(); } // 自動的に切り替える場合はカウントを変更し、そうでない場合は毎回最初から開始します。this.count = index; }, // 自動再生を自動的に切り替える: function () { var _this_ = これ; var length = this.liItem.length; // 長さを取得 this.timer = setInterval(function() { _this_.count ++; // count に 1 を足すと、これは this.timer になります _this_.count >= 長さの場合{ _this_.count = 0; } // どの li 項目が event_this_.liItem.eq(_this_.count).trigger(_this_.config.triggerType); をトリガーするか }, this.config.auto); } } window.Tab = Tab; // Tab をウィンドウ オブジェクトとして登録します。そうしないと、外部からアクセスできなくなります})(); 6. 電話する// 最初のタブを Tab クラスに渡します var tab = new Tab($('.tab').eq(0)); 7. 最適化: 複数のタブがある場合、複数の新しいタブを作成する必要はありません1. 最初の方法はinit経由です // init で初期化する Tab.init = function (tabs) { タブ.each(関数() { 新しいタブ($(this)); }); } 電話 タブを初期化します($('.tab')); 2. 2番目の方法はjQueryメソッドとして登録することです // jQueryメソッドとして登録 $.fn.extend({ タブ: 関数 () { this.each(function () { // tabメソッドを呼び出した人 new Tab($(this)); // これは、それぞれ実行されたliです }); return this; // チェーン操作} }) 電話 タブ 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.6 から 5.7 にアップグレードする際のマスター スレーブ遅延問題のトラブルシューティング
>>: Ubuntu 20.04 に GitLab をインストールして設定する方法
ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...
1. インストール前の準備1. 公式ウェブサイトからUbuntu 20.04のイメージファイルを直接...
Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...
WEB開発は主に2つのインタラクション(B/Sデータ)から構成されますブラウザ: 1html、css...
BackUpMysql.sh スクリプト #!/bin/bash PATH=/bin:/sbin:/...
目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...
次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...
この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...
この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...
さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...
序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...
序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...
ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...
この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...