ページネーションコンポーネントは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 の違いは何ですか?どうやって選ぶ?
1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...
目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...
1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...
現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...
序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...
ユーザーのホーム ディレクトリがどんどん大きくなってきたら、ホーム ディレクトリを新しいパーティショ...
目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...
目次序文関数のオーバーロードマッピングタイプ部分的、読み取り専用、Null 可能、必須選択、記録除外...
目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...
ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...
HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...
MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...
3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...
現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...
CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...