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

我是用jS寫的，不知道如何獲取當(dāng)前循環(huán)的最后一個i值

<!DOCTYPE html>

<html>

<head>

<title>地狗購物網(wǎng)——網(wǎng)頁定位導(dǎo)航效果</title>

<style>

? ? ? ? * {

? ? ? ? ? ? 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 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;

? ? ? ? ? ? border: none;

? ? ? ? }

? ? ? ?

/*請補充此處代碼，讓導(dǎo)航菜單在右側(cè)絕對定位顯示*/

? ? ? ? #menu{

? ? ? ? ? ? position:fixed;?

? ? ? ? ? ? top:100px;

? ? ? ? ? ? left:50%;

? ? ? ? ? ? margin-left:400px;

? ? ? ? }

? ? ? ? #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;

? ? ? ? }

? ? ? ? /*ie6 hack*/

? ? ? ? * html, * html body {

? ? ? ? ? ? background-image: url(about:blank);

? ? ? ? ? ? background-attachment: fixed;

? ? ? ? }

? ? ? ? * html #menu {

? ? ? ? ? ? /*position: fixed;*/

? ? ? ? ? ? position: absolute;

? ? ? ? ? ? top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');

? ? ? ? }

</style>

? ? ? ?

? ? ? ? ? ? //滾動條發(fā)生滾動時，要獲取相應(yīng)的值。

window.onscroll = function() {?

var items=document.getElementsByClassName('item');

var menu=document.getElementById('menu');

var as=menu.getElementsByTagName('a');

for(var i=0;i<items.length;i++)

{

as[i].onmousedown=function(){

for(var i=0;i<items.length;i++){

as[i].className="";

}

this.className="current";

}

var h=items[i].offsetTop;

var y=window.scrollY;

var index=0;

if(y>h-100)

{

for(var i=0;i<items.length;i++){

as[i].className="";

}

as[?].className="current";

}

}?

? ? ? ? ? ?

? ? ? ? ? ? //請補充此處代碼，讓導(dǎo)航菜單實現(xiàn)在滾動條滾動的時候自動設(shè)置焦點

? ? ? ? ? ? //給相應(yīng)樓層的a 設(shè)置 current，取消其他鏈接的current

? ? ? ? ? ? ? ??

</script>

</head>

<body>

<ul>

</ul>

</div>

<h1>地狗購物網(wǎng)</h1>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

慕粉18813290620

2016-08-09

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

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

4828

操作

收起

2 回答

慕粉18813290620 提問者
2016-08-10

這個案例有沒有更簡單的方法實現(xiàn)？例如先for循環(huán)把所有item 的className清空，【當(dāng)前的li】加className=“current”。這個【當(dāng)前的li】有辦法獲取嗎？

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

收起回答

qq_秋_
2016-08-09

as[as.length-1].className="current";

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

收起回答

舉報

0/150

提交

取消

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

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

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

進入課程

本課相似問答

1 回答獲取當(dāng)前樓層的current 為啥不寫成$("#menu").find(".current") 而是寫的menu.find("current")?

2 回答獲取top值的問題

2 回答js獲取id的方法是不是也存在兼容性呢？

2 回答我覺得最后的哪一行樣式代碼是不是寫錯了

6 回答為什么用三目賦值時： var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop; 谷歌一直是獲取的document.documentElement.scrollTop？

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