为了账号安全,请及时绑定邮箱和手机立即绑定

请问为什么实现实现不了定位导航,找了半天都不知道什么原因,求帮忙看看

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>地狗购物网-网页定位导航效果</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(){

            //监听滚动条

            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>

<div id="menu">

    <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 数码</a></li>

        <li><a href="#item5">5F 母婴</a></li>

    </ul>

</div>

<div id="content">

    <h1>地狗购物网</h1>


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

        <h2>1F 男装</h2>


        <ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        </ul>

    </div>

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

        <h2>4F 数码</h2>


        <ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        </ul>

    </div>

</div>


</body>

</html>


正在回答

1 回答

580c508c00016ed503380037.jpg

通过getAttribute('href')获得的是#item1/#item2.。。。。。带有#

580c508d0001262a03220028.jpg

通过getAttribute('id')获得的是item1/item2......而不带有#

可以通过.split('#')的方法将#item1分为两个数组,['#','item1']

再用数组中最后一个同currentId进行比较,就能够获得相等的值

如最后一图选中两个部分更改后就可以实现

本人也是初学小白,语言使用比较简单,用错专用术语的还请请见谅!

580c508d00015fa204940338.jpg


0 回复 有任何疑惑可以回复我~
#1

Urahara 提问者

非常感谢!
2016-10-24 回复 有任何疑惑可以回复我~
#2

daleizi147

看你完全用自己的方法,用原生写的,很是羡慕…你学了多久了
2016-10-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

请问为什么实现实现不了定位导航,找了半天都不知道什么原因,求帮忙看看

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信