程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascript-jquery實現導航高亮問題

javascript-jquery實現導航高亮問題

編輯:編程綜合問答
jquery實現導航高亮問題

代碼如下,想實現的效果:打開頁面時第一個鏈接高亮,之後點擊任意一個鏈接,有且只有該鏈接高亮。
目前存在的問題是,會同時存在上下兩個鏈接高亮。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
body, ul, ol, li, div, p {
    margin:0px;
    padding:0px;
}
ul {
    list-style-type:none;
    border:1px solid blue;
    background:#4f5b93;
    height:45px;
}
ul li {
    float:left;
    heihgt:45px;
    line-height:45px;
    width:100px;
    text-align:center;
}
ul li a:link, a:visited {
    color:#fff;
    text-decoration:none;
}
.act {
    background:#ff6600;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

$(function(){
$('.menu ul li').eq(0).addClass("act");
 $('ul li').each(function(){
   $(this).click(function(){
       $(this).addClass("act").siblings().removeClass("act");
      });
  });
})
</script>
</head>

<body>
<div class="menu">
    <ul>
        <li><a>首頁</a></li>
        <li><a>隨筆</a></li>
        <li><a>素材</a></li>
        <li><a>編程</a></li>
    </ul>
</div>
<div class="menu2">
    <ul>
        <li><a>首頁</a></li>
        <li><a>隨筆</a></li>
        <li><a>素材</a></li>
        <li><a>編程</a></li>
    </ul>
</div>
</body>
</html>

最佳回答:


 <script>

$(function(){
$('.menu ul li').eq(0).addClass("act");
var t=$('.menu ul li').eq(0);
 $('ul li').each(function(){
   $(this).click(function(){
 t.removeClass("act");
       $(this).addClass("act").siblings().removeClass("act");
       t=$(this); 

      });
  });
})
</script>
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved