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

請問為什么實現(xiàn)實現(xiàn)不了定位導航，找了半天都不知道什么原因，求幫忙看看

<!doctype html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>地狗購物網(wǎng)-網(wǎng)頁定位導航效果</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;

? ? ? ? }

? ? ? ? #menu {

? ? ? ? ? ? position: fixed;

? ? ? ? ? ? top: 100px;

? ? ? ? ? ? left: 50%;

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

? ? ? ? ? ? width: 50px;

? ? ? ? }

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

? ? ? ? }

? ? ? ? * html, * html body {

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

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

? ? ? ? }

? ? ? ? * html #menu {

? ? ? ? ? ? position: absolute;

? ? ? ? ? ? bottom: auto;

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

? ? ? ? }

? ? </style>

? ? <script>

? ? ? ? window.onload = function(){

? ? ? ? ? ? //監(jiān)聽滾動條

? ? ? ? ? ? window.onscroll = function(){

? ? ? ? ? ? ? ? var top = document.body.scrollTop || document.documentElement.scrollTop;

? ? ? ? ? ? ? ? var menus = document.getElementById('menu').getElementsByTagName('a');

? ? ? ? ? ? ? ? var items = document.getElementById('content').getElementsByTagName('div');

? ? ? ? ? ? ? ? var currentId = '';

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

? ? ? ? ? ? ? ? ? ? var _itemTop = items[i].offsetTop;

? ? ? ? ? ? ? ? ? ? if(top > _itemTop - 200){

? ? ? ? ? ? ? ? ? ? ? ? currentId = items[i].getAttribute('id');

? ? ? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? ? ?break;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? if(currentId){

? ? ? ? ? ? ? ? ? ? for (var j = 0; j < menus.length; j++) {

? ? ? ? ? ? ? ? ? ? ? ? var _href = menus[j].getAttribute('href');

? ? ? ? ? ? ? ? ? ? ? ? if( _href == currentId){

? ? ? ? ? ? ? ? ? ? ? ? ? ? menus[j].setAttribute('class','current');

? ? ? ? ? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? ? ? ? ? menus[j].setAttribute('class',' ');

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

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

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

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

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

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="1F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

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

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

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="2F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

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

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

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="3F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

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

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

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="4F.png" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

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

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

? ? ? ? <ul>

? ? ? ? ? ? <li><a href="#"><img src="5F.jpg" alt=""/></a></li>

? ? ? ? </ul>

? ? </div>

</div>

</body>

</html>

Urahara

2016-10-23

源自：網(wǎng)頁定位導航特效 6-2

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

849

操作

收起

1 回答

daleizi147 回答被采納 +3 積分
2016-10-23

通過getAttribute('href')獲得的是#item1/#item2.。。。。。帶有#

通過getAttribute('id')獲得的是item1/item2......而不帶有#

可以通過.split('#')的方法將#item1分為兩個數(shù)組，['#','item1']

再用數(shù)組中最后一個同currentId進行比較，就能夠獲得相等的值

如最后一圖選中兩個部分更改后就可以實現(xiàn)

本人也是初學小白，語言使用比較簡單，用錯專用術(shù)語的還請請見諒！

0 回復有任何疑惑可以回復我~

收起回答

#1

Urahara 提問者

非常感謝！

2016-10-24 回復有任何疑惑可以回復我~

#2

daleizi147

看你完全用自己的方法，用原生寫的，很是羨慕…你學了多久了

2016-10-25 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

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

參與學習 71394 人
解答問題 501 個

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

進入課程

本課相似問答

2 回答JS原生代碼去實現(xiàn)網(wǎng)頁定位導航問題，滾動時導航不變是什么原因？

2 回答jQuery實現(xiàn)網(wǎng)頁定位導航

2 回答為什么實現(xiàn)不了？

3 回答使用js寫的為什么沒有定位導航的效果呢，求幫忙看看

1 回答求大神幫忙看下哪里出錯了,實現(xiàn)不了滾動效果

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

請問為什么實現(xiàn)實現(xiàn)不了定位導航，找了半天都不知道什么原因，求幫忙看看

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

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

微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

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

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

熱搜

最近搜索清空

請問為什么實現(xiàn)實現(xiàn)不了定位導航，找了半天都不知道什么原因，求幫忙看看

1 回答

本課相似問答

請問為什么實現(xiàn)實現(xiàn)不了定位導航，找了半天都不知道什么原因，求幫忙看看

請問為什么實現(xiàn)實現(xiàn)不了定位導航，找了半天都不知道什么原因，求幫忙看看

請問為什么實現(xiàn)實現(xiàn)不了定位導航，找了半天都不知道什么原因，求幫忙看看