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

大神幫我看看，為什么我的沒反應

<!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 {
??????????? left:50%;
??????????? margin-left:400px;
??????????? position:fixed;
??????????? top:100px;
??????? }
?????? ?

??????? #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>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
????? ?
??????????? //滾動條發(fā)生滾動時，要獲取相應的值。
????????? ?
??????????? //請補充此處代碼，讓導航菜單實現(xiàn)在滾動條滾動的時候自動設置焦點

??????????? //給相應樓層的a 設置 current，取消其他鏈接的current
?????????? ?
??????????? $(document).ready(function(){
??????????????? $(window).scroll(function(){
??????????????????? var top=$(document).scrollTop();
??????????????????? var menu=$("#menu");
?????????????????????? var currentId="";
??????????????????? var items=$("#content").find(".item");
?????????????????? ?
??????????????????? items.each(function(){
??????????????????????? var m=$(this);
??????????????????????? var itemTop=m.offset().top;
????????????????????? ?
??????????????????????? if(top>itemTop-200){
??????????????????????????? currentId="#"+m.attr("id");
??????????????????????? }
??????????????????????? else{
??????????????????????????? return false;
??????????????????????? }
??????????????????? })
?????????????????? ?
??????????????????? var currentLink=menu.find(".current");
??????????????????? if(currentId&&currentId!=currentLink.attr("href")){
??????????????????????? currentLink.removeClass("current");
??????????????????????? menu.find("[href="+currentId+"]").addClass("current");
??????????????????? }
?????????????????? ?
?????????????????? ?
??????????????? })
??????????? })
?????????? ?
?????????? ?
?????????????? ?
</script>
</head>
<body>
<div id="menu">
<ul>


<li><a href="#" class="current">1F 男裝</a></li>
<li><a href="#">2F 女裝</a></li>
<li><a href="#">3F 美妝</a></li>
<li><a href="#">4F 數(shù)碼</a></li>
<li><a href="#">5F 母嬰</a></li>
</ul>
</div>
<div id="content">
<h1>地狗購物網(wǎng)</h1>

<div id="item1" class="item">
<h2>1F 男裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 數(shù)碼</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母嬰</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>

大草兔_cc

2016-09-02

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

關注問題我要回答

774

操作

收起

1 回答

套子里的海怪回答被采納 +3 積分
2016-09-02

<li><a href="#" class="current">1F 男裝</a></li>
<li><a href="#">2F 女裝</a></li>
<li><a href="#">3F 美妝</a></li>
<li><a href="#">4F 數(shù)碼</a></li>
<li><a href="#">5F 母嬰</a></li>
</ul>
</div>

我也是新手看了一下，錨點不對，href的值都一樣怎么行。