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

請(qǐng)問(wèn)錯(cuò)哪了？為什么沒(méi)有定位導(dǎo)航的效果？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{

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 dotted #0088bb;

}

#content .item{

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;

border:none;

}

#menu{

position:fixed;

top:100px;

left:50%;

margin-left:400px;

width:80px;

}

#menu ul li a{

display:block;

margin:5px 0;

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>

$(document).ready(function(e) {

? ? ? ? //滾動(dòng)條發(fā)生滾動(dòng)

$(window).scroll(function(){

//在這里，我們做一些事情

var top = $(document).scrollTop();

var menu = $("#menu");

var items = $("#content").find(".item");

var currentId = "";//當(dāng)前所在的樓層(item)id

items.each(function(){

var m = $(this);

var itemTop = m.offset().top;

if(top > itemTop - 200){

currentId = "#" + m.attr("id");

}else{

return false;

}

});

var currentLink = menu.find(".current");

if (currentId && currentLink.attr("href") |= currentId){

currentLink.removeClass("current");

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

}

//console.log(top)

});

? ? });

</script>

</head>

<body>

<ul>

? ? <li><a href="#item1" class="current">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="item1" class="item">

? ? <h2>1F 男裝</h2>

? ? ? ? <ul>

? ? ? ? <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

? ? ? ? ? ? <li><a href="#"><img src="../../../images/star/8.jpg" alt="" /></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item2" class="item">

? ? <h2>2F 女裝</h2>

? ? ? ? <ul>

? ? ? ? <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

? ? ? ? ? ? <li><a href="#"><img src="../../../images/star/6.jpg" alt="" /></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item3" class="item">

? ? <h2>3F 美妝</h2>

? ? ? ? <ul>

? ? ? ? <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

? ? ? ? ? ? <li><a href="#"><img src="../../../images/star/7.jpg" alt="" /></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item4" class="item">

? ? <h2>4F 數(shù)碼</h2>

? ? ? ? <ul>

? ? ? ? <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

? ? ? ? ? ? <li><a href="#"><img src="../../../images/star/11.jpg" alt="" /></a></li>

? ? ? ? </ul>

? ? </div>

? ? <div id="item5" class="item">

? ? <h2>5F 母嬰</h2>

? ? ? ? <ul>

? ? ? ? <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

? ? ? ? ? ? <li><a href="#"><img src="../../../images/star/16.jpg" alt="" /></a></li>

? ? ? ? </ul>

? ? </div>

</div>

</body>

</html>

榮耀zyy

2016-09-11

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

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

897

操作

收起

2 回答

Freestyle文回答被采納 +3 積分
2016-09-22

if (currentId && currentLink.attr("href") |= currentId)這里錯(cuò)了 ?是！ ? ?不是 |

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

收起回答

#1

榮耀zyy 提問(wèn)者

非常感謝！跪拜大神！

2016-09-23 回復(fù) 有任何疑惑可以回復(fù)我~

劉一_53707959
2016-09-11

不好意思這個(gè)我不會(huì)

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

收起回答

舉報(bào)

0/150

提交

取消

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

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

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

進(jìn)入課程

本課相似問(wèn)答

3 回答使用js寫的為什么沒(méi)有定位導(dǎo)航的效果呢，求幫忙看看

1 回答為什么jquery庫(kù)使用本地的滾動(dòng)導(dǎo)航就沒(méi)效果？？

1 回答設(shè)置導(dǎo)航條樣式，#menu ul li a 有a的時(shí)候沒(méi)效果，沒(méi)有a的時(shí)候有效果，那寫錯(cuò)了？

1 回答關(guān)于導(dǎo)航條定位的兩個(gè)問(wèn)題

3 回答求大神解答！導(dǎo)航定位問(wèn)題

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

請(qǐng)問(wèn)錯(cuò)哪了？為什么沒(méi)有定位導(dǎo)航的效果？

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

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

請(qǐng)問(wèn)錯(cuò)哪了？為什么沒(méi)有定位導(dǎo)航的效果？

2 回答

本課相似問(wèn)答

請(qǐng)問(wèn)錯(cuò)哪了？為什么沒(méi)有定位導(dǎo)航的效果？

請(qǐng)問(wèn)錯(cuò)哪了？為什么沒(méi)有定位導(dǎo)航的效果？

請(qǐng)問(wèn)錯(cuò)哪了？為什么沒(méi)有定位導(dǎo)航的效果？