类似天猫那样的侧边导航栏的快速实现

来源：互联网发布：淘宝运营专才试题编辑：程序博客网时间：2024/04/25 02:15
前几天在慕课上面看到一个教程，教人怎么做一个侧边导航栏，跟着教程于是自己用JQUERY也写出来了一个，贴上代码（HTML和JQUERY）给大家参考一下。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>地狗购物网网页导航效果</title><link rel="stylesheet" href="css/style.css"></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><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(function(){$(window).scroll(function(){var top=$(document).scrollTop();var menu=$("#menu");var items=$("#content").find(".item");var currentId="";//当前所在楼层item的IDitems.each(function(){var m=$(this);var itemTop=m.offset().top;//console.log(itemTop);if(top>itemTop-200){currentId="#"+m.attr("id");}else{return false;}});//var currentLink=menu.find(".current");if(currentId && currentLink.attr("href") != currentId){currentLink.removeClass("current");menu.find("[href=" + currentId + "]").addClass("current");}});});</script></html>
0 0