巧妙的有css合并图片解决tab切换的背景图片

巧妙的有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="images/content1.jpg" alt="content"/> 

     
     
            </div> 

     
     
            <div class="hide"> 

     
     
                <img  src="images/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(../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下 会占个一行的 所以具体情况具体分析  好了 我说了那么多 可能很乱 你们可能听不懂什么的  我下面放个附件在下面 感兴趣的可以下载看看代码 一下子就明白啊！！