jQuery導航欄,點選切換顏色
阿新 • • 發佈:2018-11-14
1.寫好靜態頁面
<div class="navBox"> <div class="comWidth"> <ul class="nav"> <li class="active"><a href="javascript:void(0)">網站首頁</a><span></span></li> <li><a href="javascript:void(0)">公司簡介</a><span></span></li> <li><a href="javascript:void(0)" >產品優勢</a><span></span></li> <li><a href="javascript:void(0)" >公司新聞</a><span></span></li> <li><a href="javascript:void(0)" >線上訂單</a><span></span></li> <li><a href="javascript:void(0)">客戶留言</a><span></span></li> <li><a href="javascript:void(0)">聯絡我們</a></li> </ul> </div> </div>
css樣式
/*導航*/ .navBox{ height: 48px; width: 100%; background-color: #319BF3; } .navBox .nav { height: 32px; padding: 8px 0 8px 130px; } .navBox .nav li{ height: 32px; line-height: 32px; float: left; } .navBox .nav li a{ text-align: center; height: 32px; line-height: 32px; color: #fff; float: left; padding: 0 30px 0 30px; text-decoration: none; } .navBox .nav li a:hover{ height: 32px; line-height: 32px; background: #FF8C00; } .navBox .nav .active{ height: 32px; line-height: 32px; background: #FF8C00; } .navBox .nav li span{ width: 2px; height: 32px; float: right; display: inline-block; background: url("../images/icon/s_line.jpg")right no-repeat; }
2.引入jQuery,然後寫如下程式碼
<script src="js/jquery-3.1.1.min.js"></script> <script type='text/javascript'> $(document).ready(function (){// ready 事件 $("li").each(function(index){//便利物件 $(this).click(function(){//點選觸發事件 $("li").removeClass("active");//刪除當前元素的樣式 $("li").eq(index).addClass("active");//添加當前元素的樣式 }); }); }); </script>
完成效果圖