巧妙的有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，如需转载请自行联系原作者