點選切換Css樣式
阿新 • • 發佈：2018-12-11
說明:作為一個Java後端程式設計師，有時候也需要自己去寫些前端程式碼，所以將工作中用到的一些小知識做記錄分享。
* ①先看效果圖：
i、初始
ii、點選切換樣式
* ②程式碼展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>點選切換Css類</title> <style> .nav{ width: 690px; height: 80px; margin: 0 auto; border: 2px solid #0797B5; } .nav ul li { display: inline; list-style: none; } .nav ul li{ border: 1px solid solid; margin: 14px; text-decoration: none; font-size: 20px; padding-bottom: 10px; } .navClicked{ font-weight: bold; color: #c61919; border-bottom: 3px solid #c61919; cursor: pointer; } .nav ul li:hover { font-weight: bold; color: #c61919; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script> // 導航切換 $(function(){ //第一種方法 $(".nav ul li").each(function(index) { $(this).click(function() { $(".nav ul li").eq(index).addClass("navClicked").siblings().removeClass("navClicked"); }) }) //第二種方法 /*$(".nav ul li").click(function(){ $(this).addClass("navClicked").siblings().removeClass("navClicked"); });*/ }); </script> </head> <body> <div class="nav"> <ul> <li class="navClicked">首頁</li> <li>美國留學</li> <li>留學諮訊</li> <li>院校庫</li> <li>合作伙伴</li> <li>關於我們</li> </ul> </div> </body> </html>
* ③最後稍微做下說明：
除了導航欄切換，這種js方法可以運用在許多地方，需要的可以複製程式碼執行看看效果。