給導覽列添加停留樣式，導覽列添加停留樣式

給導覽列添加停留樣式，導覽列添加停留樣式

淺談下給類似導覽列的東東，添加停留樣式的三種方法：

執行個體：

HTML代碼：

 <div class="side_layout">      <!--Sidebar content-->      <div class="list-group">      <a href="#" class="list-group-item active">項目1 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>        <a href="#" class="list-group-item">項目2 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>        <a href="#" class="list-group-item">項目3 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>        <a href="#" class="list-group-item">項目4 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>        <a href="#" class="list-group-item">項目5 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>        <a href="#" class="list-group-item">項目6 <span class="glyphicon_right_img glyphicon glyphicon-chevron-right"></span></a>      </div>    </div>

js代碼：

方法一：

$(function(){$(".side_layout a").click(function(){$(this).addClass('active');$(this).siblings().removeClass('active');});   });方法二：$(document).on("click", ".side_layout a", function(){$(this).addClass('active').siblings().removeClass('active');});方法三：$(function(){$(".side_layout a").bind('click',function(){$(this).addClass('active');$(this).siblings().removeClass('active');});    });

個人認為方法二最方便。

方法一和三都需要包含在$(function()內部

方法二、三都是給元素繫結一個單擊事件，區別在於$(document).on的方法是把綁定委託到了文檔上，二bind方法是委託到了.side_layout a上，據查閱資料，前者效率更好~~~

怎動態設定導覽列被選中的當前樣式

代碼注釋
!important 可以提升指定樣式規則的應用優先權
width:111px!important 整個菜單的寬度
width:80px!important 菜單串連的寬度
top:234px整個菜單的位置,即距頂部距離為234px
height:222px!important可以根據需要自己調節高度
line-height:15px!important與height:15px!important 是對應的,也可以根需要自己需要設定菜單與菜單之間的位置排列規則
 
怎用jquery給導航條隨著頁面加個樣式？

點擊“首頁”或者“熱門推薦”這些導航不是跳轉頁面嗎，都跳轉到另外一個頁面了.那些動作也就起不了效果了，這些是後台判斷的。希望能幫到你，如果不是點擊跳轉，我再幫你寫個JQ.