巧妙的有css合并圖檔解決tab切換的背景圖檔

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

<a target="_blank" href="http://blog.51cto.com/attachment/201111/161117606.jpg"></a>

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

<a target="_blank" href="http://blog.51cto.com/attachment/201111/161251408.jpg"></a>

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

<a target="_blank" href="http://blog.51cto.com/attachment/201111/161929497.jpg"></a>

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

HTML代碼

&lt;div id="tab1"&gt; 

        &lt;ul class="menu"&gt; 

            &lt;li class="first-col"&gt;&lt;a  title="茶莊介紹"&gt;茶莊介紹&lt;/a&gt;&lt;/li&gt; 

            &lt;li class="last-col"&gt;&lt;a title="信用卡還款介紹"&gt;信用卡還款介紹&lt;/a&gt;&lt;/li&gt; 

        &lt;/ul&gt; 

        &lt;div class="content-main"&gt; 

            &lt;div class="content"&gt; 

                &lt;img src="images/content1.jpg" alt="content"/&gt; 

            &lt;/div&gt; 

            &lt;div class="hide"&gt; 

                &lt;img  src="images/content2.jpg" alt="content"/&gt; 

        &lt;/div&gt; 

    &lt;/div&gt; 

CSS代碼

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

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

.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;} 

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

.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;} 

.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;} 

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

JS代碼很簡單

$(function(){ 

        $(".menu li:first").addClass("current"); 

        $(".menu li").hover(function(){ 

            $(this).addClass("current").siblings().removeClass("current"); 

            var index = $(".menu li").index(this); 

            $(".content-main div").eq(index).show().siblings().hide(); 

        }) 

   }) 

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

<a href="http://down.51cto.com/data/2359308" target="_blank">附件：http://down.51cto.com/data/2359308</a>

本文轉自 塗根華 51CTO部落格，原文連結：http://blog.51cto.com/tugenhua/719211，如需轉載請自行聯系原作者