                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導(dǎo)航特效

menu.find([href=+ currentId +]).addClass("current");怎么改？

<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>地狗購物網(wǎng)——網(wǎng)頁定位導(dǎo)航</title>
?? ?<style type="text/css">
?? ??? ?*{margin:0;
?? ??? ??? ?padding: 0;
?? ??? ?}
?? ??? ?body{
?? ??? ??? ?font-size: 12px;
?? ??? ??? ?line-height: 1.7;
?? ??? ?}
?? ??? ?li{list-style: none;
?? ??? ?}
?? ??? ?#content{
?? ??? ??? ?width: 800px;
?? ??? ??? ?margin:0 auto;
?? ??? ??? ?padding: 20px;

?? ??? ?}
?? ??? ?#content h1{
?? ??? ??? ?color: #0088bb;
?? ??? ?}
?? ??? ?#content .item{
?? ??? ??? ?padding: 20px;
?? ??? ??? ?margin-bottom: 20px;
?? ??? ??? ?border: 1px solid #0088bb;
?? ??? ?}
?? ??? ?#content h2{
?? ??? ??? ?font-size: 16px;
?? ??? ??? ?font-weight: bold;
?? ??? ??? ?border-bottom: 2px solid #0088bb;
?? ??? ??? ?margin-bottom: 10px;
?? ??? ?}
?? ??? ?#content .item li{
?? ??? ??? ?display: inline;
?? ??? ??? ?margin-right: 10px;
?? ??? ?}
?? ??? ?#content .item li a img{
?? ??? ??? ?width: 230px;
?? ??? ??? ?height: 230px;
?? ??? ?}
?? ??? ?#menu{
?? ??? ??? ?position: fixed;
?? ??? ??? ?top: 100px;
?? ??? ??? ?left: 50%;/*定位在頁面中部*/
?? ??? ??? ?margin-left: 400px;/*中部偏移400px,.item寬800*/
?? ??? ??? ?width: 80px;
?? ??? ?}
?? ??? ?#menu ul li a{
?? ??? ??? ?display: block;
?? ??? ??? ?margin:5px;
?? ??? ??? ?font-size: 14px;
?? ??? ??? ?font-weight: bold;
?? ??? ??? ?color: #333;
?? ??? ??? ?width: 80px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?line-height: 50px;
?? ??? ??? ?text-decoration: none;
?? ??? ??? ?text-align: center;
?? ??? ?}
?? ??? ?#menu ul li a:hover,
?? ??? ?#menu ul li a.current{
?? ??? ??? ?color: #fff;
?? ??? ??? ?background: #0088bb;
?? ??? ?}
?? ?</style>
?? ?<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
?? ?<script type="text/javascript" src="">
?? ??? ?$(document).ready(function(){
?? ??? ??? ?//滾動條發(fā)生滾動
?? ??? ??? ?$(window).scroll(function(){
?? ??? ??? ??? ?var top=$(document).scrollTop();
?? ??? ??? ??? ?var menu=$('#menu');
?? ??? ??? ??? ?var items=$('#content').find(".item");
?? ??? ??? ??? ?var currentId="";
?? ??? ??? ??? ?items.each(function(){
?? ??? ??? ??? ??? ?var m=$(this);/*item*/
?? ??? ??? ??? ??? ?var itemTop=m.offset().top;/*獲取高度*/
?? ??? ??? ??? ??? ?if(top>itemTop-180){/*滑動高度大于item高度*/
?? ??? ??? ??? ??? ??? ?currentId="#"+m.attr("id");/*確定錨點*/
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?});
?? ??? ??? ??? ?//給相應(yīng)樓層的a 設(shè)置 current，取消其他鏈接的current
?? ??? ??? ??? ?var currentLink=menu.find(".current");/*錨點目前位置*/
?? ??? ??? ??? ?if(currentId&&currentLink.attr('href')!=currentId){
?? ??? ??? ??? ??? ?currentId.removeClass('current');
?? ??? ??? ??? ??? ?menu.find([href=+ currentId +]).addClass("current");
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?})
?? ?</script>
</head>
<body>
<div id="menu">
?? ?<ul>
?? ??? ?<li><a href="#item1">1F 男裝</a></li>
?? ??? ?<li><a href="#item2">2F 女裝</a></li>
?? ??? ?<li><a href="#item3">3F 美妝</a></li>
?? ??? ?<li><a href="#item4">4F 數(shù)碼</a></li>
?? ??? ?<li><a href="#item5">5F 母嬰</a></li>
?? ?</ul>
</div>
<div id="content">
?? ?<h1>地狗購物網(wǎng)</h1>
?? ?<div id="item1">
?? ??? ?<h2>1F 男裝</h2>
?? ??? ?<ul>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="1F.jpg" alt="1F 男裝"></a></li>
?? ??? ?</ul>
?? ?</div>

?? ?<div id="item2">
?? ??? ?<h2>2F 女裝</h2>
?? ??? ?<ul>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="2F.jpg" alt="2F 女裝"></a></li>
?? ??? ?</ul>
?? ?</div>

?? ?<div id="item3">
?? ??? ?<h2>3F 美妝</h2>
?? ??? ?<ul>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ??? ?<li><a href="#"><img src="3F.jpg" alt="3F 美妝"></a></li>
?? ??? ?</ul>
?? ?</div>

?? ?<div id="item4">
?? ??? ?<h2>4F 數(shù)碼</h2>
?? ??? ?<ul>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ??? ?<li><a href="#"><img src="4F.png" alt="4F 數(shù)碼"></a></li>
?? ??? ?</ul>
?? ?</div>

?? ?<div id="item5">
?? ??? ?<h2>5F 母嬰</h2>
?? ??? ?<ul>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ??? ?<li><a href="#"><img src="5F.jpg" alt="5F 母嬰"></a></li>
?? ??? ?</ul>
?? ?</div>
</div>
</body>
</html>

keveon

2016-12-19

源自：網(wǎng)頁定位導(dǎo)航特效 4-3

關(guān)注問題我要回答

1276

操作

收起

1 回答

Jack_1992
2016-12-19

menu.find("[href=" + currentId + "]").addClass("current");

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報

0/150

提交

取消

網(wǎng)頁定位導(dǎo)航特效

參與學(xué)習(xí) 71394 人
解答問題 501 個

本課程講解網(wǎng)頁定位導(dǎo)航特效，仿天貓版地狗購物網(wǎng)，你值得擁有

進(jìn)入課程

本課相似問答

3 回答menu.find("[href="+currentId+"]").addClass("current");里的[ ]

1 回答var currentLink = menu.find(".current"); if (currentId && currentLink.attr("href") != currentId) { currentLink.removeClass("current"); menu.find("[href=" + currentId + "]").addClass("current");

1 回答menu.find("[href="+currentId+"]").addClass("current");求指教??！

3 回答menu.find("[href="+currentId+"]").addClass("current");中 [href="+currentId+"]" 為什么要用" [] "號.

1 回答最后$menu.find("[href="+currentID+"]").addClass('current')這句里面，$menu.find("[href="+currentID+"]")為什么不能用$(".current").next()代替

搜索更多本課相關(guān)問答