Juery Web タブで code_jquery を実装する

まず、フロントエンド コード

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

< ;div class="tab">

個人情報

>

マイフォト

私のブログ

;/div>

;/ div>

>< ;/div> 🎜> コードは次のとおりです:


$(function() {
//Web ページのタブの切り替え
var $menu_li = $("div .tab_menu ul li");
$menu_li.click(function(){

$(this).addClass("selected") //現在強調表示されている
.siblings().removeClass( "selected"); // 他のピアの強調表示を削除します

varindex = $menu_li.index( $(this) ); //

の子ノードのインデックスを検索します$("div.tab_box > div ") //インデックス N の DIV が表示されます .eq(index).show() .siblings().hide() }) })

次に CCS スタイルを設定できます

コードをコピーします


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


.clear {clear:both; height:0px; overflow:hidden;}
.tab{ width:400px;}
.tab_menu ul{padding:0px;margin:0px;}
.tab_menu li{ list-style:none; float:left; 背景:#C2CEFE;

パディング: 0px 8px; マージン-右:6px; ボーダー:#86B4CA 1px ソリッド;
}
.box{ 幅:400px; 高さ:200px; ボーダー:#A8C9D9;パディング:10px 8px; }

.tab_menu ul li. selected{background:#dadada; カーソル:ポインタ; }

関連ラベル：

网页选项卡

ソース：php.cn

前の記事：Javascript シリーズのデータ​​型 string_javascript スキルに精通している 次の記事：JavaScriptを使いこなすシリーズ - Javascriptの基礎_Javascriptスキル

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...

から 2024-04-06 19:13:16

0

2

476

Reactjsで複数のチェックボックスを選択する方法 複数のチェックボックスを選択したいオプションのリストがありますが、選択することができません。このコードの何が問題なのでしょうか?サンドボックスの URL

から 2024-04-06 18:55:21

0

1

396

window.open() と data を使用して計算ドキュメントを開きます: スキーム 計算された HTML ドキュメントを生成するブラウザーで実行される Web ページがあり、それを新しいブラウザー タブで開きたいと考えています。シンプルで汚い方法は、これを行うこと...

から 2024-04-06 15:06:34

0

1

378

Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...

から 2024-04-06 11:35:59

0

1

456

Gmail と XOAUTH2 を使用した PHPMailer: 現在のリフレッシュ トークンの有効期限が切れたときに、新しいリフレッシュ トークンを自動的に取得するにはどうすればよいですか? XOAUTH2 で Gmail を使用することに不安があります (PHPMailerWiki)、および GmailXOAUTH2 で PHPMailer を使用して電子メールを送信...

から 2024-04-06 10:14:45

0

1

373

関連トピック

詳細>

• Xiaomi電話をフラッシュする方法
• mysqlページング
• 速度トラッカーの使用法
• SQLを使用する場合
• 画像処理ソフトとは何ですか
• 現在のページのスクリプトでエラーが発生した場合の対処方法
• Pythonで何ができるのか
• notnull アノテーションの使用方法