導(dǎo)航欄背景圖片的切換，使用CSS或者JS。
下面是用使用JQuery來實現(xiàn)。
<ul class="topNavigation"> <li><a title="部門A" href="#" target="_blank">部門A</a></li> <li><a title="部門B" href="#" target="_blank">部門B</a></li> <li><a title="部門C" href="#" target="_blank">部門C</a></li> <li><a title="部門D" href="#" target="_blank">部門D</a></li> <li><a title="部門E" href="#" target="_blank">部門E</a></li> </ul>
樣式：
.topNavigation { float: left; height: 35px; line-height: 35px; overflow: hidden; padding-left: 8px; } .topNavigation li { float: left; height: 37px; line-height: 37px; list-style: none outside none; padding: 0 21px; text-align: center; vertical-align: middle; width: auto; } .topNavigation li a:link { color: #000000; font-size: 13px; font-weight: bold; text-decoration: none; }
效果如下：
JQuery腳本：
<script src="../JavaScripts/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> setTimeout(function () { $(function () { $(".topNavigation").children("li").each(function () { $(this).mouseover(function () { $(this).css({ "background-image": "url('../images/nav_btn_hover.png')", "background-position": "top" }); }), $(this).mouseleave(function () { $(this).css({ "background-image": "url('../images/line.gif')", "background-position": "right" }); }) }, null); }); }, 1000); </script>
最終效果：
