上門一對一計算機家教
當前位置: 首頁 > 建站心得 >

用js實現導航菜單點擊切換選中時高亮狀態 當前頁面樣式改變

點擊: 時間:2016-05-04 來源:北京家教網
隨著用戶點擊導航或菜單上不同的頁面,出現此選項高亮顯示或變為一個新的樣式是經常用到的。實現它所用的原理就是通過js中的location.href得到當前頁面的地址,然后在與導航上的鏈接地址匹對,相同的就用一個css樣式標記。此方法支持動

隨著用戶點擊導航或菜單上不同的頁面,出現此選項高亮顯示或變為一個新的樣式是經常用到的。實現它所用的原理就是通過js中的location.href得到當前頁面的地址,然后在與導航上的鏈接地址匹對,相同的就用一個css樣式標記。此方法支持動態鏈接和靜態鏈接多種形式。

<script src="js/jquery.min.js"></script><!--必須引用加入這個js-->
<style>
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
 
.cur{ background:#D96C00; font-weight:bold;}<!--這里的名字cur可以是任意,只要和后面的js對應即可-->
</style>
 
<ul class="menu" id="menu">
  <li><a href="nav.html?id=1">首頁</a></li>
  <li><a href="nav.html?id=2">PHP綜合</a></li>
  <li><a href="nav.html?id=3">Ecshop</a></li>
</ul>
 
<script type="text/javascript">
  var urlstr = location.href;
  var urlstatus=false;
  $("#menu a").each(function () {
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('cur'); urlstatus = true;
    } else {
      $(this).removeClass('cur');
    }
  });
  if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>
好了。。感興趣的朋友趕快試試吧。
------分隔線----------------------------
30选5开奖查询