創想工作室

經常在網上購物的朋友，對這個功能一定非常熟悉，就是你在選擇產品的時候，有一個按顏色選擇的功能。這可以說是一個必不可少的功能，因為用戶是有色彩偏好的。我們以淘寶商城為例子：

在這個頁面中，當我選擇了我白色的時候，淘寶給它加了一個對勾，還有紅色的邊框，在這里有一個CSS的小技巧，我是從淘寶上學的，我們先看下我們的HTML結構：

如果我們想要淘寶那樣的紅色邊框，可以對li的position寫為relative，接著寫個padding:1px;這個估計是針對ie6的，其它就寫border了，不得不承認，淘寶的CSS代碼還是細致的，那個小色是通過一個i標簽來實現的，這個值得我們學習。。。

對于淘寶是如何實現點擊右側小圖實現左側切換的，我也是無法理解，人家將代碼寫在background，但我們也要實現這樣的功能。我們采用jquery，我們通過定義樣式名的添加減少，實現圖片的切換：

如果把這個定義為一個tab切換，其實也是對的。。。只不過代碼寫得不一樣。。

以下是我制作的效果截圖：

以下我提供源文件，歡迎有需要的朋友下載使用： jquery實現淘寶按顏色選擇產品特效.zip