※ 引述《poat777 (诺基亚)》之铭言： : 我想问一下~ : http://cherrynokia.github.io/test/webdemo1003/1003.html : 关於分页向下滑动程式码 : 在nav切换页面的时候 : 为啥 要按两三次click : 才能正式切换到我要的页面? : 参考网站如下： : http://www.wix.com/website-template/view/html/782?utm_source=media_buying&utm_ : medium=paid_referral&utm_campaign=flash&experiment_id=templatemo.com%5Etemplat : e_home_spot-2%5E200x200-782biobeautycare 因为a.active被写在Home的li上，所以大多数情况都不会换页 按两三次会换是因为按太快了，页面还来不及refresh的时候读到新的active 就这麽刚好触发js切换内容了...我一开始还点不太出来orz 关於如何解决这个问题，要先看原本的js $('.nav ul li').click(function (){ var _this = $('.nav ul li a.active').html(); 从这边可以看出，当点击li的时候，触发事件 并且将a而且有active这个class的html内容存到_this这个变数里 而後面的内容，则是依照_this取到的字，来决定要触发哪一段动画来显示div 基本上这不是个很好的写法，利用a做为click会好一些， 一来是a本身不需要js就有换页的能力了， 二来是如果在没js的浏览器上，该使用者就看不到网站了 依照你写的js原本的逻辑，可以调整成这样 1.修正li里面的a的写法，改用#的锚点方式 <li><a href="#">Bio Beauty Care</a></li> <li><a href="#contact">CONTACT</a></li> <li><a href="#skin_care">SKIN CARE</a></li> <li><a href="#home" class="active">HOME</a></li> 2.把click换成吃a，底下吃到_this後，把锚点里的#取代成空白，方便指定某个class 最後将所有的div都隐藏，只把click到的显示出来 另外如果只是隐藏或显示的简单动画，可以利用jquery完成 http://www.w3school.com.cn/jquery/effect_slidedown.asp 修正後的js(原本的记得放到注解，避免冲到) $('.nav ul li a').click(function () { var _this = $(this).attr("href").replace("#",""); $(".home").hide(); $(".skin_care").hide(); $(".contact").hide(); $("."+_this).slideDown(); }); 不过这种js写法不是很好，如果我有很多个div要hide会累死， 未来网站变大的话，想精简js可以从这下手，初学的话就先这样吧 另外再附一份结果好了 http://not0001.byethost7.com/ptt5 这份有另外加了锚点，如果没有js，就直接把所有页面印出来，用锚点跳页 全部列出来後有种近几年很潮的单页式网站感，可以试着关掉js跑看看 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 218.187.98.175 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1476796007.A.7D2.html