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

我的JS代码,,发现很多同学都说JS不出来效果,刚开始我也是,,但是后来发现真的是书写上的小问题啊!大家还是仔细检查下自己的代码吧!

<!DOCTYPE html>
<html>
<head lang="en">
    <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 h2 {
            font-size: 15px;
 font-weight: bold;
 border-bottom: 2px solid #0088bb;
 }

        #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>
    <script>
 function getByClassName(obj, cls) {
            var elements = obj.getElementsByTagName("*");
 var result = [];
 for (var i = 0; i < elements.length; i++) {
                if (elements[i].className == cls) {
                    result.push(elements[i]);
 }
            }
            return result;
 }
        window.onload = function () {
            window.onscroll = function () {
                var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
 var menus = document.getElementById("menu").getElementsByTagName("a");
 var items = getByClassName(document.getElementById("content"), "item");
 var currentId = "";

 for (var j = 0; j < items.length; j++) {
                    var m = items[j];
 var itemTop = m.offsetTop;
 if (top > itemTop - 300) {
                        currentId = m.id;
 } else {
                        break;
 }
                }

                if (currentId) {
                    for (var k = 0; k < menus.length; k++) {
                        var n = menus[k];
 var _href = n.href.split("#");
 if (_href[_href.length - 1] != currentId) {
                            n.className = "";
 } else {
                            n.className = "current";
 }
                    }
                }
            }
        }
    </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>


我刚开始的错误出在if (_href[_href.length - 1] != currentId)这里,我之前写成了if (_href[-_href.length - 1] != currentId),真是太低级的错误啊!大家一定要仔细。



正在回答

4 回答

我来回答1、table的子节点结构为text和tbody当你直接获取table元素去删除tr节点的时候是删除不掉的。

aaisxvpzjshptgmmcix

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

嗯嗯 粗心大意会浪费很多时间的!建议刚开始写的时候,不要追求速度,写的时候认真一点,少出错最好!

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

举报

0/150
提交
取消

我的JS代码,,发现很多同学都说JS不出来效果,刚开始我也是,,但是后来发现真的是书写上的小问题啊!大家还是仔细检查下自己的代码吧!

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