前端開發過程中需要不斷學習，不斷溫習。最近計劃白天繼續溫習jquery，晚上學習下原生javascript，然後利用一些時間做做網站推廣SEO來著。計劃暫時這些。
白天活干完，弄個jquery仿凡客誠品圖片切換的效果
以前寫的不是很好，今天重新做個 jquery特效，其實很簡單，漠然回首也就那回事。
先來個原型吧,鋒利的jquery第一個例子，相信大家都很熟悉。沒錯，你絕對沒看錯。
代碼如下 . 代碼如下:
<div class="menu">
<div class="has_children">
<span>第一張</span>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
</div>
<div class="has_children">
<span>第二張</span>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
</div>
<div class="has_children">
<span>第三張</span>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
</div>
<div class="has_children">
<span>第四張</span>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $(".has_children").click(function(){
// $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//點擊後效果
// })
$(".has_children").mouseover(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠標移動過去效果
})
})
</script>
原書是點擊後的效果，我又加了個鼠標移動上去。
現在適當的修改下css和js就可以了。
在線效果原型DEMO 在線效果圖文切換DEMO