jquery の入門—ナビゲーション バーの作成 (スケーラブル)_jquery

1. ナビゲーション バー を作成します。タイトルをクリックすると、ナビゲーション バーのコンテンツを拡大および縮小したり、コンテンツを簡略化したり、より多くのコンテンツを表示したりできます。
サンプル コードは次のとおりです:

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

TITLE>/TITLE>
NAME="キーワード" CONTENT="">



<スクリプト タイプ="text/javascript"> ;
$(function(){ //ページ読み込みイベント
$(".clsHead").click(function(){ //画像クリックイベント
if($ (".clsContent"). is(":visible")){ //コンテンツが表示されている場合
$(".clsHead spam img").attr("src","Images/a1.gif") ; //画像を変更します
$ (".clsContent").css("display","none") //コンテンツを非表示
}else{
$(".clsHead spam img"); .attr("src","Images/ a2.gif"); //画像を変更します
$(".clsContent").css("display","block");//コンテンツを表示します
}
});
$ (".clsBot > a").click(function(){ //ホットリンク クリック イベント
if($(".clsBot > a").text ()=="Simplify"){ // コンテンツが '簡略化' の場合
$("ul li:gt(4):not(:last)").hide(); // インデックス付きの要素を非表示にする4 より大きく、最後の項目ではない数値
$(".clsBot > a").text("more"); //文字の内容を "more" に変更します
}else{
$ ("ul li:gt(4): not(:last)").show().addClass("GetFocus"); //選択した要素を表示し、style
$(".clsBot > a") ).text("Simplify") / /文字の内容を "簡素化" に変更します
}
});

書籍カテゴリ

小説
;li>文学 ( 230 )

• 青少年 ( 1430 )


• 子供 ( 1560 )


• 人生 ( 870 )
  
• 社会科学
  
• ;a href="#">管理 ( 1450 )


• /a> ( 1780 )


• ;/i>


• 参考書 ( 3450 )
🎜>
• 導入バージョン ( 980 )
その他のカテゴリ< ;/a> ( 3230 )



簡略化
>




2. レンダリング :





クリック後:




簡略化:

関連ラベル：

jQueryを始める ナビゲーションバー

ソース：php.cn

前の記事：ブログ上の雪の結晶が画面を超えても表示されるようにする_jquery 次の記事：IE9/Google/Firefox_javascript スキルと互換性があるように js Calendar カレンダー コントロールを変更します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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

最新の問題

jqueryを使用した電話番号の長さの検証が機能しない jqueryを使用して電話番号の長さを検証しようとしています。ユーザーが自分で入力を開始すると、次のコードが表示されるはずです。 functionvalidatePhone(pho...

から 2024-03-30 11:39:59

0

1

283

関連トピック

詳細>

• mybatis の 1 次キャッシュと 2 次キャッシュ
• oracleパラメータの使い方
• xlive.dll が見つからない場合の解決策
• 3c認定とは何ですか
• 1ビットコインは人民元でいくらですか?
• imgファイルの開き方
• Honmeng システムと Android システム間のデータは相互運用できますか?
• C# チュートリアル