html_html/css_WEB-ITnoseのliの簡易表示・非表示-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

html_html/css_WEB-ITnoseのliの簡易表示・非表示

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:55 AM

页面代码：

图书 >

|11

小说

|22

问問題: 前の 3 つの 11| (つまり、色の部分を表示) だけを表示し、次のボタンを表示し、マウスが「图书 >」に移動すると、すべて表示され、不知道怎么做？

回帰论(解決案)

充電：これらのコンテンツをすべて表示します次のように

|11

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><div id="bbb">图书   ></div><div id="aaa"> <li style="float:left;">11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li></div><script type="text/javascript">function lishow() {	$("#aaa li").show();}function lihide() {	$("#aaa li").slice(3).hide();}$(lihide);var timer;$("#bbb").mouseenter(function(event){	lishow();}).mouseleave(function(event){	timer = setTimeout(lihide, 300);});$("#aaa").mouseenter(function(event){	clearTimeout(timer);}).mouseleave(function(event){	lihide();});</script>

2 楼大神、機能は実現しています。ただし、後面に同様の図がある場合は使用できません。

|11

图书2 >

|11

場合私が想う図 2 (図 3...) も同様の機能を実現します。修正。

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><div class="bbb">图书1   ></div><div> <li style="float:left;">11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li></div><div class="bbb">图书2   ></div><div> <li style="float:left;">11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li> <li style="float:left;">|11</li></div><script type="text/javascript">function lishow(t) {	$(t).next().find("li").show();}function lihide(t) {	$(t).find("li").slice(3).hide()}$(function() {	$(".bbb").each(function() {		lihide($(this).next());	});});var timer;$(".bbb").mouseenter(function(event){	lishow(this);}).mouseleave(function(event){	var t = $(this).next();	timer = setTimeout(function() {		lihide(t);	}, 300);});$(".bbb").next().mouseenter(function(event){	clearTimeout(timer);}).mouseleave(function(event){	lihide(this);});</script>

大神、辛苦你了。我就想做网易http://yuedu.163.com/。
(マウスが図に移動する時期)。

声明

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

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

React static Page構成：React-AppReviredを使用したコード圧縮を避ける方法は？Apr 05, 2025 pm 01:18 PM

React-App-Recrowiredを使用して静的ページを構築するときにコード圧縮を回避する方法について多くの開発者が配信したい...

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。