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

menu.find([href=+ currentId +]).addClass("current");怎么改?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地狗购物网——网页定位导航</title>
    <style type="text/css">
        *{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 solid #0088bb;
        }
        #content 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;
        }
        #menu{
            position: fixed;
            top: 100px;
            left: 50%;/*定位在页面中部*/
            margin-left: 400px;/*中部偏移400px,.item宽800*/
            width: 80px;
        }
        #menu ul li a{
            display: block;
            margin:5px;
            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 src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="">
        $(document).ready(function(){
            //滚动条发生滚动
            $(window).scroll(function(){
                var top=$(document).scrollTop();
                var menu=$('#menu');
                var items=$('#content').find(".item");
                var currentId="";
                items.each(function(){
                    var m=$(this);/*item*/
                    var itemTop=m.offset().top;/*获取高度*/
                    if(top>itemTop-180){/*滑动高度大于item高度*/
                        currentId="#"+m.attr("id");/*确定锚点*/
                    }else{
                        return false;
                    }
                });
                //给相应楼层的a 设置 current,取消其他链接的current
                var currentLink=menu.find(".current");/*锚点目前位置*/
                if(currentId&&currentLink.attr('href')!=currentId){
                    currentId.removeClass('current');
                    menu.find([href=+ currentId +]).addClass("current");
                }
            })
        })
    </script>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#item1">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">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
            <li><a href="#"><img src="1F.jpg" alt="1F 男装"></a></li>
        </ul>
    </div>

    <div id="item2">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
            <li><a href="#"><img src="2F.jpg" alt="2F 女装"></a></li>
        </ul>
    </div>

    <div id="item3">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
            <li><a href="#"><img src="3F.jpg" alt="3F 美妆"></a></li>
        </ul>
    </div>

    <div id="item4">
        <h2>4F 数码</h2>
        <ul>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
            <li><a href="#"><img src="4F.png" alt="4F 数码"></a></li>
        </ul>
    </div>

    <div id="item5">
        <h2>5F 母婴</h2>
        <ul>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
            <li><a href="#"><img src="5F.jpg" alt="5F 母婴"></a></li>
        </ul>
    </div>
</div>
</body>
</html>

正在回答

1 回答

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

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

举报

0/150
提交
取消

menu.find([href=+ currentId +]).addClass("current");怎么改?

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