ホームページ ウェブフロントエンド jsチュートリアル わずか 3 行の code_jquery で jQuery によって実装された表示および非表示関数の完全な例

わずか 3 行の code_jquery で jQuery によって実装された表示および非表示関数の完全な例

May 16, 2016 pm 03:37 PM
jquery 見せる 隠れる

この記事の例では、わずか 3 行のコードで jQuery によって実装された表示および非表示関数について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

jQuery テクノロジーは非常に使いやすく、たとえば、頻繁に使用される「表示」と「非表示」機能はわずか 3 行のコードで実装できます。十分です。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンライン デモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/

具体的なコードは次のとおりです:

<!doctype html>
<html>
<head>
<meta charset="gbk" />
<title>3行代码实现显示与隐藏</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
  .showmore{ float:left;}
  .cont .aa {
  height: auto;
  width: 400px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  float: left;
  }
  .cont .aa .a1 {
  float: left;
  height: 30px;
  width: 300px;
  }
  .cont .aa .a2 {
  height: 30px;
  width: 350px;
  float: left;
  display:none;
  }
 </style>
</head>
<body>
<div class="cont">
 <div class="aa">
  <div class="a1">tab1</div>
  <div class="showmore"><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明:今天你要嫁给我嘛~</div>
 </div>
 <div class="aa">
  <div class="a1">tab2</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明:北京、上海四日游</div>
 </div>
 <div class="aa">
  <div class="a1">tab3</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明:河南是华夏文明的根源</div>
 </div>
</div>
<script>
$(".showmore a span").mouseover(function(e){
 $(this).html(["显示", "隐藏"][this.hutia^=1]);
 $(this.parentNode.parentNode).next().toggle();
 e.preventDefault();
});
</script>
</body>
</html>
ログイン後にコピー

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WeChatの友達をブロックしたり削除したりせずに非表示にする方法は? WeChatの友達をブロックしたり削除せずに非表示にする方法 WeChatの友達をブロックしたり削除したりせずに非表示にする方法は? WeChatの友達をブロックしたり削除せずに非表示にする方法 Mar 13, 2024 pm 07:19 PM

WeChatの友達をブロックしたり削除したりせずに非表示にする方法は?友達を非表示にしたいが、その方法がわからないユーザーが多いため、このサイトでは、WeChat の友達をブロックしたり削除したりせずに非表示にする方法をユーザーに丁寧に紹介します。ブロックや削除せずに WeChat の友達を非表示にする方法 方法 1: 1. まず WeChat ソフトウェアを開き、WeChat ページでアドレス帳を見つけて、「マイ」をクリックします。 2. 次に、設定ページに入ります。 3. 「プライバシー」オプションを見つけてクリックします。 4. 次に、「彼に見せない」をクリックします。 5. [彼女に表示させない] ページに移動し、[+] をクリックして非表示にしたい友達にチェックを入れます。

Douyinショートビデオの作品を非表示にする方法 個人的なビデオ作品を非表示にする方法 Douyinショートビデオの作品を非表示にする方法 個人的なビデオ作品を非表示にする方法 Mar 12, 2024 pm 12:49 PM

Douyinショートビデオアプリソフトには多数のショートビデオ作品が用意されており、好きなだけ視聴することができ、全て永久無料で提供されています。さまざまなタイプのライブビデオチャンネルがオープンしており、ビデオコンテンツはすべてオリジナルです。誰もが最も満足できる視聴方法を提供します。アカウントを入力してオンラインにログインすると、誰もが毎日視聴している動画に基づいて正確に推奨される、さまざまな刺激的なショートビデオがプッシュされます。また、生放送ルームに入ってアンカーと対話したりチャットしたりすることもできます。もっと幸せに。個人がアップロードした作品も非表示にすることができます。設定はワンクリックで非常に簡単です。スワイプするとどこからでも見ることができます。上下にスワイプすると、無数のネチズンのリアルタイムのコメントが表示されます。日常生活のダイナミクスを共有することもできます。編集者は詳細なオンライン Douyin ショート ビデオを公開しており、ユーザーは個人のビデオ作品を非表示にする方法を求めています。最初に公開された Douyin のショートビデオ

Xiaomi Mi 14でスマートアイランドを非表示にする方法は? Xiaomi Mi 14でスマートアイランドを非表示にする方法は? Mar 18, 2024 pm 03:40 PM

Xiaomi Mi 14は、驚くべきハードウェア構成と優れた機能に加えて、スマートアイランドという魅力的な場所も隠しています。ここでは、ユーザーはパーソナライズされたカスタマイズと無制限のクリエイティブな携帯電話体験を楽しむことができます。しかし、誰もがこの機能を好むわけではないので、Xiaomi Mi 14はどうやってスマートアイランドを隠すのでしょうか?一緒に調べてみましょう。 Xiaomi Mi 14でスマートアイランドを非表示にする方法は? 1. Xiaomi 14 携帯電話の設定アプリケーションを開きます。 2. スクロールして「機能」オプションを見つけ、クリックして入力します。 3. 機能ページで「スマートアイランドを非表示」オプションを見つけてオンにします。 4. スマート アイランドの非表示がオンになっていることを確認した後、デスクトップに戻ると、スマート アイランドが非表示になっていることがわかります。

Douyin での作品の非表示に関する詳細なチュートリアル Douyin での作品の非表示に関する詳細なチュートリアル Mar 25, 2024 pm 03:11 PM

1.まず[+]をクリックして撮影します。 2. 右下のチェックマークをクリックして撮影完了を確認します。 [次へ]をクリックし、3. [閲覧できるユーザー]をクリックします。 [プライベート] を選択するだけです シナリオ 2: 作品が取得されました 1. [自分] をクリックし、[仕事] を選択します。 2. 右側の[3 点]のロゴをクリックします。 3. 左にスワイプして [権限設定] を見つけます。 4. [非公開に設定] をクリックします。

携帯電話に隠されたジャンクを徹底的にクリーンアップする方法 (携帯電話のメモリからジャンクを完全に削除します) 携帯電話に隠されたジャンクを徹底的にクリーンアップする方法 (携帯電話のメモリからジャンクを完全に削除します) Jun 01, 2024 am 09:29 AM

テクノロジーの進化とスマートフォンの普及により、携帯電話は私たちの日常生活に欠かせないものになりました。ただし、これらのジャンク ファイルは貴重なストレージ スペースを占有し、時間が経つにつれて、大量の隠れたジャンクが電話機内に蓄積され、電話機のパフォーマンス低下の原因となります。携帯電話に隠されたジャンクを徹底的にクリーンアップする方法を知ることは、すべての携帯電話ユーザーにとって必須の知識となっています。 1. 不要なアプリケーション キャッシュを見つけてクリアする 2. 使用しなくなったアプリケーションを削除する 3. 写真とビデオのキャッシュをクリーンアップする 4. 一時ファイルとダウンロード フォルダーを徹底的にクリーンアップする 5. 連絡先とテキスト メッセージの記録を整理してクリーンアップする 6. システム キャッシュをクリーンアップする 7.不要なシステム アプリケーションをアンインストールします。 8. ブラウザのキャッシュと履歴を削除します。 9. 無効な音楽およびオーディオ ファイルを削除します。 10. 携帯電話のファイル システムを最適化します。

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

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

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

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

bilibiliでウォッチリストを非表示にする方法 bilibiliでウォッチリストを非表示にする方法 Mar 01, 2024 pm 01:10 PM

bilibiliソフトを使っていると、ウォッチリストが他のユーザーに見られてしまうので、友達から「リストを非公開にしたい」という声が上がったので、ここではリストを非公開にする方法を紹介します。携帯電話で「bilibili」アプリを開き、パーソナルセンターページに入り、下部右下の「その他のサービス」をクリックします。展開されたオプションで「設定」機能を見つけ、クリックして開きます。 2. 設定ページに移動したら、「セキュリティとプライバシー」を見つけてクリックしてに入ります。 3. 次に、入力したページに「スペース設定」があるので、クリックして選択します。 4. 最後に、スペース設定ページの「ウォッチリストを公開」の後ろにスイッチボタンがあるので、そのスライダーをクリックしてグレーに設定します。

See all articles