jqueryタブプラグインの本番実装 code_jquery-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryタブプラグインの本番実装 code_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:24 PM

jquery tab プラグイン

jquery プラグインの基本形式:

コードをコピーコードは次のとおりです:

 
(function($){ 
$.fn.tab = function(options){//$.fn の後のタブは、このプラグインの関数名です。好みに応じて変更できます。
var defaults = { 
//関連する属性の設定 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//関数実装された設定}); 
})(jQuery); 

 

上記のコードを改善します。

コードをコピーコードは次のとおりです: (function($){

$.fn.tab = function(options){

var defaults = { 
eventname: "click", //トリガーイベント、click はクリック、mousemove はマウスの動き 
titlekeyid: "tabtitle",// スイッチング ID 
 sedcss: "sed",//選択された場合の CSS 
nosedcss :"nosed" // 選択されていない場合の CSS 
} 
var options = $.extend(defaults, options) 
this.each; (function(){ 
var tab=$(this ); 
//イベントをバインド
$(tab).find("li").bind(options.eventname,function(){ 
$("#" options.titlekeyid).find( "li").attr("class", options.nosedcss); 
$(this).attr("class", options.sedcss); >$("#" options.titlekeyid "info") .find("div").css("display", "none"); 
$("#" $(this).attr("id") ) "info").css("display", " block"); 
//私の JS 能力はまだ限られており、コードがうまく書かれていないと感じます 
}) 
}); 
}; 
})(jQuery); 
 
 
プラグインを使用する際のコードを見てみましょう。 🎜> (コード 2) 

コードをコピー

コードは次のとおりです:

上記 2 つの段落を結合して説明します

コードをコピーします

コードは次のとおりです。 $("#tabtitle") は、どこで使用するのですか? jquery について少し知っている人なら、これが何を意味するかわかるでしょう。詳細は説明しません。.tab はこのプラグイン用に定義した関数名です。の (コード 1) タブの $.fn.tab と比較してください。 .tab({eventname:"mousemove",sedcss:"sed"}); イベント名と sedcss は、(コード 1) vardefaults ={}; で定義された属性値です。属性値を変更する必要がない場合は、デフォルトの属性値を使用し、プラグインは次のように使用する必要があります。

最後に、すべてのページを添付しますコード:

コードをコピー

コードは次のとおりです:

タブテスト

 "text/javascript">
$().ready(function(){ 
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"}); 
}) 


 ;body>
//ここでのIDは$("#tabtitle")のIDに相当し、LIのIDは最後に追加される番号です
< ;li id=" tabtitle1" class="sed">asdfasfd 
asdfasfd

 asdfasfd

asdfasfd

 🎜>//ここでの ID は ul の ID、ID はそれぞれ最後に追加される番号と「info」です 
 000000

111111

 22222

33333

 44444

< ;/div> ご容赦ください

ソースコードパッケージのダウンロード

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

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

7403

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1218

Related knowledge

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか? Mar 08, 2024 am 08:55 AM

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか?通常の状況では、Chrome プラグイン拡張機能のデフォルトのインストールディレクトリは次のとおりです。 1. WindowsXP での Chrome プラグインのデフォルトのインストールディレクトリの場所: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Windows7 の chrome プラグインのデフォルトのインストールディレクトリの場所: C:\Users\username\AppData\Local\Google\Chrome\User

Edge ブラウザがこのプラグインをサポートしない理由に対する 3 つの解決策を共有します Mar 13, 2024 pm 04:34 PM

ユーザーが Edge ブラウザを使用する場合、より多くのニーズを満たすためにいくつかのプラグインを追加する場合があります。しかし、プラグインを追加すると、このプラグインはサポートされていないと表示されます。この問題を解決するにはどうすればよいですか?今日は編集者が 3 つの解決策を紹介しますので、ぜひ試してみてください。方法 1: 別のブラウザを使用してみてください。方法 2: ブラウザ上の Flash Player が古いか見つからないため、プラグインがサポートされていない可能性があり、公式 Web サイトから最新バージョンをダウンロードできます。方法3：「Ctrl+Shift+Delete」キーを同時に押します。「データを消去」をクリックしてブラウザを再度開きます。

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

WordPressプラグインのインストールに失敗した場合のエラーメッセージへの対処方法は？ Mar 04, 2024 pm 04:57 PM

WordPressプラグインのインストールに失敗した場合のエラーメッセージへの対処方法は？現在最も人気のあるコンテンツ管理システムの 1 つである WordPress には豊富なプラグインライブラリがあり、ユーザーにさまざまな機能拡張とカスタマイズオプションを提供します。しかし、WordPressを使用していると、プラグインのインストールに失敗したり、エラーメッセージが表示されたりして、ユーザーが混乱したり不安になったりすることがあります。この記事では、WordPress プラグインのインストールに失敗する一般的なエラーメッセージとその対処方法を紹介します。 1. 報告

Google Chrome でアニメーションプラグインを実行できる仕組み Mar 28, 2024 am 08:01 AM

Google Chrome ではどのようにしてアニメーションプラグインを実行できるようになりますか? Google Chrome は非常に強力です。多くの友人はビデオアニメーションを見るためにこのブラウザを使用するのが好きです。ただし、さまざまなアニメーションビデオを見たい場合は、ブラウザにアニメーションプラグインをインストールする必要があります。多くの友人は Google Chrome を使用しています。アニメーションプラグインを入れても動画が見れないのですが、どうすればいいでしょうか？次に、アニメーションプラグインを Google Chrome で実行できるようにするための具体的な手順をエディターに示します。興味のある友人は、見に来てください。 Google Chrome でアニメーションプラグインの実行を許可する具体的な手順: 1. まず、コンピュータで Google Chrome を実行し、ホームページの右上隅にあるメインメニューボタンをクリックします (図を参照)。 2. メインメニューを開いた後、下の「設定」オプションを選択します (図を参照)。 3. 設定で

Google Chromeプラグインのブロックを解除する方法 Apr 01, 2024 pm 01:41 PM

Google Chrome プラグインのブロックを解除するにはどうすればよいですか? Google Chrome を使用する際、豊富な機能やサービスを提供し、作業効率を向上させるために、さまざまな便利なプラグインをインストールするユーザーは多いですが、一部のユーザーは、Google Chrome にプラグインをインストールすると、プラグインが機能しなくなるという意見を持っています。常に表示されます。がブロックされています。この状況が発生した後、どうすればプラグインのブロックを解除できますか?次に、エディターが Google Chrome のプラグインのブロックを解除する手順を説明します。必要な友達は、見に来てください。 Google Chrome でプラグインのブロックを解除する方法ステップ 1. ブロックされたプロンプトが表示されたら、「コントロールバー」をクリックし、「ActiveX コントロールのインストール」を選択します。 2. 次に、ブラウザの「ツール」メニューを開き、「インターネットオプション」をクリックします。 3.

See all articles