一、場景
最近做重構，有一個功能是，鼠標點擊鏈接后顯示不同樣式：
代碼如下，樣式布局我修改后如下，使用bootstrap框架來做。
<!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>
現在重點說一下：功能實現。
原來代碼是這樣實現鏈接點擊樣式的，給每個鏈接不同的class，
<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三個頁面公共模塊，通過include來共享。這樣在調用不同頁面時，其他鏈接的樣式不生效。所以可以實現被點擊的鏈接顯示不同樣式的效果。
但是這樣的做法是非常糟糕的。同一個樣式有多少個頁面就重寫多少次，不同class名稱對應的卻是同樣的樣式。
這樣的代碼我是無法忍受的。下面用一小段js來實現同樣功能。
二、用js重構
代碼如下：
<!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>
三、類似的效果
實現方式如下：通過判斷用戶請求的url和是哪個，就給哪個添加active樣式。
<div class="btn-toolbar"> <div class="btn-group"> {% url "addpermissionurl" as theaddpermissionurl %} <a class="btn btn-default {%if request.path = theaddpermissionurl%} active {%endif%}" href={{ theaddpermissionurl }}><span class="glyphicon glyphicon-edit"></span>新建權限</a> {% url "listpermissionurl" as thelistpermissionurl %} <a class="btn btn-default {%if request.path = thelistpermissionurl%} active {%endif%}" href={{ thelistpermissionurl }}><span class="glyphicon glyphicon-list"></span>權限列表</a> </div> </div>
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4612411.html有問題歡迎與我討論，共同進步。