Re: [請益] 為何無法正常切換頁面

看板Web_Design作者nottt (無)時間8年前 (2016/10/18 21:06)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串2/2 (看更多)

※ 引述《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://www.ptt.cc/bbs/Web_Design/M.1476796007.A.7D2.html