ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実装し、id jsPaginationを持つDOM要素にページネーション表示部分を完成させてください。要件は次のとおりです。 1. 最大 5 ページを連続して表示し、現在のページを中央に強調表示します (デモ 1 を参照) 上記の要件を満たすページング コンポーネントを実装するには、ネイティブ JS を使用します。以下の点に注意する必要がある 1: <li> タグを取得する場合、前の <li> タグと次の <li> タグの間にテキスト ノードがあるため、 nextSibling を 2 回使用する必要があります。 ページ = page.nextSibling.nextSibling; 2: 提供された<li>タグのinnerHTMLは''であり、そこにページ番号を追加する必要があります。要件の5つの状況に従って記述します。 3: 最初のページと最後のページの非表示状態に特に注意してください。 current-2<=1 の場合、最初のページを非表示にします。current+2.>=total の場合、最後のページを非表示にします。最初のページと最後のページを非表示にする必要があるのは、上記の demo1、demo3、demo4、demo5 の場合です。 (demo1 の最初と最後のページが非表示になっていることは見落とされがちです!) html <ul class="pagination" id="jsPagination"> <li>ホーム</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>最後のページ</li> </ul> CS 。隠れる{ 表示: なし!重要; } .ページネーション{ マージン: 0 自動; パディング: 0; リストスタイル: なし; テキスト配置: 中央; } .ページネーション li{ 表示: インラインブロック; 幅: 30ピクセル; 高さ: 30px; オーバーフロー: 非表示; 行の高さ: 30px; マージン: 0 5px 0 0; フォントサイズ: 14px; テキスト配置: 中央; 境界線: 1px実線 #00bc9b; 色: #00bc9b; カーソル: ポインタ; } .ページネーション li.current, .pagination li:hover{ 背景: #00bc9b; 色: #ffffff; } .デモ{ マージン: 10px 0; パディング: 10px; 背景: #eeeeee; テキスト配置: 中央; } JavaScript 関数ページネーション(合計、現在) { var ele = document.getElementById('jsPagination'); //デモ1用 if(現在-2>=1&¤t+2<=合計) { var page=ele.firstChild.nextSibling; (現在の2==1)の場合 page.className='非表示'; (変数 i=current-2,p=current-2;i<=current+2;p++,i++) の場合 { ページ=page.nextSibling; console.log(ページ); ページ=page.nextSibling; console.log(ページ); ページ内HTMLをコピーします。 if(i==現在) page.className='現在の'; } if(現在+2==合計) { var last = page.nextSibling.nextSibling; last.className='非表示'; } } //デモ2用 そうでない場合(合計==0) { ele.className='ページネーションを非表示'; } //デモ3用 そうでない場合(合計<=5) { var fir = ele.firstChild.nextSibling; fir.className='非表示'; var page=fir; (変数 i=1;i<=5;i++) { ページ = page.nextSibling.nextSibling; (i <= 合計) の場合 { ページ内HTMLをコピーします。 if(i==現在) page.className='現在の'; } それ以外 { page.className='非表示'; } } var last = page.nextSibling.nextSibling; last.className='非表示'; } //デモ4用 そうでなければ(現在-2<=0) { var page=ele.firstChild.nextSibling; page.className='非表示'; (変数 i=1;i<=5;i++) { ページ = page.nextSibling.nextSibling; ページ内HTMLをコピーします。 if(i==現在) page.className='現在の'; } } //デモ5用 そうでない場合(現在+2>合計) { var page=ele.firstChild.nextSibling; for(var i=total-4;i<=total;i++) { ページ = page.nextSibling.nextSibling; ページ内HTMLをコピーします。 if(i==現在) page.className='現在の'; } var last = page.nextSibling.nextSibling; last.className='非表示'; } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.17 のインストールと使用方法のチュートリアル図
>>: ウェブサイトの高速化における CDN、SCDN、DCDN の違いは何ですか?どうやって選ぶ?
目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...
目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...
序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...
CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...
目次無イメージの創造と混乱Noneオブジェクトをクリーンアップする方法トリムミラーコンテナで使用され...
簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...
質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...
背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...
1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...
ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...
全文インデックスには特別なクエリ構文が必要です。全文検索はインデックスの有無にかかわらず実行できます...
vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...
注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...
目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...
g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...