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

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

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

就合并成這樣的就可以了 雖然這個是我 以前做的頁面 但是還是想總結(jié)下及分享下 如果有朋友遇到這樣的 直接用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放了個背景l(fā)eft 0 這樣設(shè)置后 在li里面有個a標(biāo)簽 當(dāng)然如果沒有連接的話 用span標(biāo)簽會比較好 語義化嗎 這樣設(shè)置后讓a標(biāo)簽同樣有個背景 讓他right 0；這樣的話 每個li就是上面藍(lán)色的背景啊 那么他的width不設(shè)置 設(shè)置padding就可以了 display：block 但是有時候是要設(shè)置寬度的 因?yàn)樵谠O(shè)置display：block時候 在IE6下 會占個一行的 所以具體情況具體分析? 好了 我說了那么多 可能很亂 你們可能聽不懂什么的? 我下面放個附件在下面 感興趣的可以下載看看代碼 一下子就明白啊！！

轉(zhuǎn)載于:https://blog.51cto.com/tugenhua/719211

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。