巧妙的有css合併圖片解決tab切換的背景圖片 有時候做tab切換的時候 會碰到下面的這種情況 我截個圖過來看看

tab切換 開啟頁面時候 茶莊介紹  及滑鼠移上去時候 是上面這樣的效果  當滑鼠移下來的時候 是下面這樣的

茶莊介紹 就變成這樣的背景  一剛開始做這樣的 我就想到用js 預設情況下 就想用四張圖片 預設做成第一張圖片那樣的 當我滑鼠移到第二個選單時候 用js中的setAttribute讓他他替換圖片的路徑 但是用js控制比較麻煩點 css樣式要寫好 並且實現效果及維護網站效能 不如合併圖片好 我合併只用一張圖片 減少請求數 提高效能 下面是我合併的他圖 

就合併成這樣的就可以了 雖然這個是我 以前做的頁面 但是還是想總結下及分享下 如果有朋友遇到這樣的 直接用css就可以解決啊

HTML程式碼

 



    

  1. <div id=“tab1”> 
    2. 

  2.         <ul class=“menu”> 
    3. 

  3.             <li class=“first-col”><a  title=“茶莊介紹”>茶莊介紹</a></li> 
    4. 

  4.             <li class=“last-col”><a title=“信用卡還款介紹”>信用卡還款介紹</a></li> 
    5. 

  5.         </ul> 
    6. 

  6.         <div class=“content-main”> 
    7. 

  7.             <div class=“content”> 
    8. 

  8.                 <img src=“images/content1.jpg” alt=“content”/> 
    9. 

  9.             </div> 
    10. 

  10.             <div class=“hide”> 
    11. 

  11.                 <img  src=“images/content2.jpg” alt=“content”/> 
    12. 

  12.             </div> 
    13. 

  13.         </div> 
    14. 

  14.     </div> 
    15. 



CSS程式碼


 




    

  1. #tab1{overflow:hidden; width:950px; margin:auto;} 
    2. 

  2. .menu{ width:950px; height:60px; margin:0; padding:0; background: url(../images/all-bg.jpg) no-repeat;} 
    3. 

  3. .menu li{ float:left; display:inline; height:36px;background:url(../images/bg-title2.jpg) no-repeat left 0;padding-left:14px; text-align:center; margin-top:23px; margin-left:32px; font-size:14px;} 
    4. 

  4. .menu li.last-col{ margin-left:0;} 
    5. 

  5. .menu li a{background:url(../images/bg-title2.jpg) no-repeat right 0; padding-right:14px; display:block; line-height:35px; cursor: pointer; color:#fff;} 
    6. 

  6. .menu li.current{ float:left; display:inline; height:36px; background:url(../images/bg-title2.jpg) no-repeat left -50px; padding-left:14px; text-align:center;} 
    7. 

  7. .menu li.current a{ padding-right:14px; display:block; color:#333;background:url(../images/bg-title2.jpg) no-repeat right -50px;} 
    8. 



JS程式碼很簡單


 




    

  1. $(function(){ 
    2. 

  2.         $(“.menu li:first”).addClass(“current”); 
    3. 

  3.         $(“.menu li”).hover(function(){ 
    4. 

  4.             $(this).addClass(“current”).siblings().removeClass(“current”); 
    5. 

  5.             var index = $(“.menu li”).index(this); 
    6. 

  6.             $(“.content-main div”).eq(index).show().siblings().hide(); 
    7. 

  7.         }) 
    8. 

  8.     }) 
    9. 



下面是個附件 不明白的地方可以看看 最主要的是 在每個li放了個背景left 0 這樣設定後 在li裡面有個a標籤 當然如果沒有連線的話 用span標籤會比較好 語義化嗎 這樣設定後讓a標籤同樣有個背景 讓他right 0；這樣的話 每個li就是上面藍色的背景啊 那麼他的width不設定 設定padding就可以了 display：block 但是有時候是要設定寬度的 因為在設定display：block時候 在IE6下 會佔個一行的 所以具體情況具體分析  好了 我說了那麼多 可能很亂 你們可能聽不懂什麼的  我下面放個附件在下面 感興趣的可以下載看看程式碼 一下子就明白啊！！