ホームページ > 記事 > ウェブフロントエンド > ナビゲーションのクリックによる選択効果の再構築_html/css_WEB-ITnose
ナビゲーションのクリックによる選択効果の再構築_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:26866ブラウズ
1. シナリオ
最近リファクタリングされた機能の 1 つは、マウスでリンクをクリックした後にさまざまなスタイルを表示することです。
コードは、ブートストラップ フレームワークを使用して、次のようにスタイル レイアウトを変更しました。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8" /> <link href="css/bootstrap.min.css" rel="stylesheet"> <title>starof test</title> <style type="text/css">.menu{border-radius:4px;background-color:#f8f8f8;padding:10px;margin-top:30px;}.menu p{font-size:26px;margin-bottom:25px;color:#76caea;padding-left:30px;margin-top:15px;}.menu .nav-pills > li > a:hover{background-color:#8fd4e6;}/*page1.html页面定义*/.menu01{background-color:#5dc1d1;border-radius:4px;}/*page2.html页面定义*//*.menu02{background-color:#5dc1d1;border-radius:4px;}*//*page3.html页面定义*//*.menu03{background-color:#5dc1d1;border-radius:4px;}*/ </style></head><body><div class="col-md-2 menu"> <p> <span class="glyphicon glyphicon-user"></span> <span>starof</span> </p> <ul class="nav nav-pills nav-stacked"> <li class="menu01"><a href="page1.html">page1</a></li> <li class="menu02"><a href="page2.html">page2</a></li> <li class="menu03"><a href="page3.html">page3</a></li> </ul></div></body></html> 今度は関数の実装に焦点を当てます。
元のコードは、次のようにリンク クリック スタイルを実装し、各リンクに異なるクラスを与えます。
<li class="menu01"><a href="page1.html">page1</a></li><li class="menu02"><a href="page2.html">page2</a></li><li class="menu03"><a href="page3.html">page3</a></li>
次に、それを page1.html ページで定義します。
.menu01{background-color:#5dc1d1;border-radius:4px;} 同様に、page2.html ページでも定義します。
.menu02{background-color:#5dc1d1;border-radius:4px;} page3.html ページで定義されています:
.menu03{background-color:#5dc1d1;border-radius:4px;} menu メニュー このモジュールは、page1.html、page2.html、page3.html の 3 つのページの共通モジュールであり、include を通じて共有されます。このようにして、別のページを呼び出した場合、他のリンクのスタイルは有効になりません。したがって、クリックされたリンクには異なるスタイルが表示される場合があります。
しかし、このアプローチは非常に悪いです。同じスタイルはページの数だけ書き換えることができますが、同じスタイルに対して異なるクラス名が対応します。
この種のコードには我慢できません。以下は、同じ機能を実現するための小さな js です。
2. js でリファクタリングしますコードは次のとおりです:
rrree
3. 同様の効果実装方法は次のとおりです: ユーザーがリクエストした URL を判断して、それにアクティブなスタイルを追加します。
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8" /> <link href="css/bootstrap.min.css" rel="stylesheet"> <title>starof test</title> <style type="text/css">.menu{border-radius:4px;background-color:#f8f8f8;padding:10px;margin-top:30px;}.menu p{font-size:26px;margin-bottom:25px;color:#76caea;padding-left:30px;margin-top:15px;}/*下面这样写是为了提高选择器的优先级*/.menu .nav-pills > li > a:hover{background-color:#8fd4e6;}.clickstyle{background-color:#5dc1d1;border-radius:4px;} </style></head><body><div class="col-md-2 menu"> <p> <span class="glyphicon glyphicon-user"></span> <span>starof</span> </p> <ul class="nav nav-pills nav-stacked"> <li><a href="#">page1</a></li> <li><a href="#">page2</a></li> <li><a href="#">page3</a></li> </ul></div><script type="text/javascript"> var oLis=document.getElementsByTagName("li"); var i,j; var length=oLis.length; for(i=0;i<length;i++){ oLis[i].onclick=function(){ for(j=0;j<length;j++){ oLis[j].className=""; } this.className+="clickstyle"; } }</script></body></html>
この記事の著者は、知識自体が変化しているため、著者も常に学び成長しており、記事の内容も随時更新されます。読者の誤解を避け、出典を追跡しやすくするため、転載の際は出典を明記してください。ご質問がございましたら、お気軽にご相談ください。