熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery關於導航條背景切換效果實現示例

2022-06-13   來源: JSP教程 
效果如下
 

  復制代碼 代碼如下:

  <DOCTYPE html>
<html>
<head>
<script src=></script>
<meta charset=UTF>
<style>
nav{height:px; width: %;background: #EEE;}
nav ul li{float: left;liststyle: none;marginright: px;lineheight: px;}
nav ul li a{textdecoration: none; display: block;width: px; textalign: center;}
onNav{fontweight: bold;color:#fff; background: #ccc;}
</style>
</head>
<body>
<div class=nav>
<ul>
<li><a # class=onNav>首頁</a></li>
<li><a #>博客</a></li>
<li><a #>論壇</a></li>
<li><a #>關於</a></li>
<li><a #>聯系</a></li>
</ul>
</div>
<script type=text/javascript>
$(nav ul li a)click(function(){if($(this)has(onNav)){
$(this)addClass(onNav)parent(li)siblings(li)find(a)removeClass(onNav);}})
</script>
</body>
</html>


js部分

  復制代碼 代碼如下:

  <script type=text/javascript>
$(nav ul li a)click(function(){if($(this)has(onNav)){ //找到a標簽添加click事件判斷是否有背景存在
$(this)addClass(onNav)parent(li)siblings(li)find(a)removeClass(onNav);}}) //添加類並移除已有的類
</script>


上面是一種方法以下是另外一種

  復制代碼 代碼如下:

  <script type=text/javascript>
$(nav ul li a)click(function(){ //找到a標簽並添加click事件
var inx = $(this)parent(li)index(); //定義變量inx返回這個元素在同輩中的索引位置
$(nav ul li)find(a)removeClass(on_nav); //移除已有的類
$(nav ul li)eq(inx)find(a)addClass(on_nav); //獲取點擊元素並添加類
</script>


From:http://tw.wingwit.com/Article/program/Java/JSP/201404/30609.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.