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

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

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

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

HTML代碼

?

<div?id="tab1">?

????????<ul?class="menu">?

????????????<li?class="first-col"><a??title="茶莊介紹">茶莊介紹</a></li>?

????????????<li?class="last-col"><a?title="信用卡還款介紹">信用卡還款介紹</a></li>?

????????</ul>?

????????<div?class="content-main">?

????????????<div?class="content">?

????????????????<img?src="p_w_picpaths/content1.jpg"?alt="content"/>?

????????????</div>?

????????????<div?class="hide">?

????????????????<img??src="p_w_picpaths/content2.jpg"?alt="content"/>?

????????????</div>?

????????</div>?

????</div>?

CSS代碼

?

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

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

.menu?li{?float:left;?display:inline;?height:36px;background:url(../p_w_picpaths/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(../p_w_picpaths/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(../p_w_picpaths/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(../p_w_picpaths/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下 會占個一行的 所以具體情況具體分析? 好了 我說了那么多 可能很亂 你們可能聽不懂什么的? 我下面放個附件在下面 感興趣的可以下載看看代碼 一下子就明白啊！！

轉載于:https://blog.51cto.com/tugenhua/719211

總結

以上是生活随笔為你收集整理的巧妙的有css合并图片解决tab切换的背景图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。