实现JS标签切换效果【CSS图片切换】

运行代码尝试，我把整篇的CSS文件内容都弄上来了，难得去找具体内容了，反正能得到效果就可以了。

复制代码
代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实现标签切换效果 </title>
</head>
<style type="text/css">

*{
    margin:0 auto;
    padding:0;
}
body{
    font-size: 12px;
    font-family:Arial;
    color:#000;
    background:#fff url(body.gif) top repeat-x;
    text-align:center;
    height:843px;
}
#wrapper {
    width:1024px;
    padding:0px;
    margin: 0px auto;
    text-align:left;
    height:180px;
}
#wrappertion{
    width:1024px;
    height:123px;
    padding-left:200px;
}
#header {
    height:180px;
    overflow:hidden;
    color: #f4e9d3;
    width:100%;
    float:left;
}
#headtop {
    height:13px;
    margin: 0 auto;
}
#mainWrapper {
    width:800px;
    margin:0 auto;
    clear:both;
}
#websiteLogo {
    float: left;
    margin:7px 5px;
    width:200px;
    height:161px;
}
#head_r{
    float:left;
    margin-right:0px;
    width:750px;
}
#zhongjian{
    width:750px;
    height:110px;
    margin-left: 0px;
}
.logo {
    width:161px;
    height:146px;
    overflow:hidden;
}
#kouhao{
    width:450px;
    float:left;
    margin-left:15px;
    margin-top:40px;
}
#dianhua{
    float:right;
    margin-top:9px;
}
#shoucang{
    float:right;
}
#shoucang a{
    font-size:12px;
    color:#FF9900;
    text-decoration:none;
}
#daohang{
   font-size:14px;
   color:#FFCC00;
}
#footer{
    height:80px;
    width:1024px;
}
#foot_l{
    height:60px;
    width: 80px;
    
    padding-top:5px;
    float:left;
    display:inline;
}
#foot_l img{
    float:righr;
}
#copyriht{
    width:680px;
    height:40px;
    font-family:"黑体";
    color:#FFFFFF;
    float:left;
    margin-top:30px;
    margin-left:5px;
    
}
#copyright .cp_a{

}
#copyright .cp_b{

}
#bottMenu{
    margin:0 20px;
    height:20px;
    width:500px;
    text-align:center
}
#bottMenu li{
    height:15px;
    list-style:none;
    float:left;
    margin:2px 5px;
}
#bottMenu li a{
    text-decoration:none;
    color:#FFFFFF;
    font-size:12px;
}
#content{
    height:540px;
    width:1024px;
    padding:0px;
    margin: 0 auto;
    text-align:left;
}
#topmenu{
height:50px;
width:777px;
}
#main{
    height:500px;
    width:400px;
    padding:0px;
    margin: 0px auto;
    float:left;
}
.pic{
    height:300px;
}
.pic_a{
    margin-left:20px;
}
.pic_b{
    margin-left:60px;
    margin-top:20px;
}
.pic_c{
    margin-left:100px;
    margin-top:20px;
}
.scroll_main{
    height:100px;
    width:399px;
    margin-top:20px;
}
.scroll_a{
    background-image:url(pic6.gif);
    background-position:400px;
}
#xnav{
    width:600px;
    height:500px;
    float:left;
    background-color:#D09511;
}
#xnav_pp
{
    width:600px;
    height:205px;
    padding-bottom:0px;
}
#back_zs{
    width:230px;
    height:195px;
    background-image:url(pic_zs.gif);
    float:left;    
}
#back_zs_t{
    height:165px;
    width:227px;
    margin-top:30px;
    
}
#xnav_z{
    height:205px;
    width:282px;
    float:left;
    margin:0px auto;
}
#dnav{
    width:315px;
    margin-right:0;
    padding-top:5px;
    padding-bottom:0px;
    height:195px;
}
#subnav{
float:left;
width:85px;
height:195px;
background-image:url(pic9.gif);
}
.s1{display:block;}
.s2{display:none;}
.subnav_ms{
    width:80px;
    height:37px;
    float:left;
}
.subnav_ms img{
margin:12px 0 0 12px;
}
.subnav_hb{
    width:80px;
    height:37px;
    float:left;
}
.subnav_hb img{
margin:15px 0 0 12px;
}
.subnav_yh{
    width:80px;
    height:37px;
    float:left;
}
.subnav_yh img{
margin:15px 0 0 12px;
}
.subnav_hy{
    width:80px;
    height:37px;
    float:left;
}
.subnav_hy img{
margin:15px 0 0 12px;
}
.subnav_cl{
    width:80px;
    height:37px;
    float:left;
}
.subnav_cl img{
margin:17px 0 0 26px;
}


#back_news{
    background-color:#922424;
    height:30px;
    margin-top:10px;
    margin-left:5px;
    border-top-style:double;
    border-bottom-style:double;
    border-color:#CEA677;
    size:12px;
}
#back_size{
font-size:15px;
color:#FFFFFF;
padding:5px 0 5px 35px;
}

#column{
    height:300px;
    width:600px;
}
#column_z{
height:300px;
}
#column_size{
font-size:15px;
color:#FFFFFF;
padding:5px 0 5px 35px;
margin-top:0;
}
#column_cy
{
    background-color:#922424;
    height:30px;
    margin-left:5px;
    border-top-style:double;
    border-bottom-style:double;
    border-color:#CEA677;
    size:12px;
}
#column_news
{
    width:600px;
    height:200px;
    background-image:url(11.gif);
    padding-top:60px;
    padding-left: 11px;
}
.huiyi{
    width:200px;
    height:200px;
    float: left;
    }
.picg_a{
    width: 168px;
    height: 100px;
    float: left;
    margin-left:4px;    
    }
.picg_b{
    width: 168px;
    height: 100px;
    float: left;
    margin-left:5px;
    }
.picg_c{
    width: 168px;
    height: 100px;
    float: left;
    margin-left:5px;
    }
.canyin{
    width:200px;
    height:200px;
    float: left;
    }
.chalou{
    width:200px;
    height:200px;
    float: left;
}
.ab_content{
    height:100px;
    width:155px;
    float:left;
    margin:12px 0 0 12px;

}
.ab_content a{
    color:#775203;
    text-decoration:none;
    font-family:"宋体";
}


</style>

<body>
<div id="xnav">
      <div id="xnav_pp">
            <div id="xnav_z">
                <div id="back_news">
                    <div id="back_size"> </div>
                </div>
            <div id="news"></div>
      </div>
            <div id="dnav">
                <div id="back_zs">
                    <div id="back_zs_t">
                        <div id="Info_11" class="s1"><img  src="http://a3.att.hudong.com/07/76/01200000033329115477630530907.jpg"  height="160px" width="227px"/></div>
                        <div id="Info_12" class="s2"><img  src="http://cimg2.163.com/catchimg/20100225/7ONQ2K7N_1.jpg"  height="160px" width="227px"/></div>
                        <div id="Info_13" class="s2"><img  src="http://www.feizl.com/upload2007/2008_11/08112419218785.jpg"  height="160px" width="227px"/></div>
                        <div id="Info_14" class="s2"><img  src="http://img.bimg.126.net/photo/OKHq2WTgFfUw7O0-3H6u0Q==/5128192600692022719.jpg"  height="160px" width="227px"/></div>
                        <div id="Info_15" class="s2"><img  src="http://games.qq.com/images/netgame/2008/07/18/addie/s/16.jpg"  height="160px" width="227px"/></div>
                    </div>
                </div>
            <div id="subnav" onmouseover="this.calssName='subnav'" >
                <div id="channel11" class="subnav_ms" onmouseover="ChangeChannel(1,1);">1111111</div>
                <div id="channel12"  class="subnav_ms" onmouseover="ChangeChannel(1,2);">22222222</div>
                <div id="channel13" class="subnav_ms" onmouseover="ChangeChannel(1,3);" >33333333</div>
                <div id="channel14"  class="subnav_ms" onmouseover="ChangeChannel(1,4);">444444444</div>
                <div id="channel15"  class="subnav_ms" onmouseover="ChangeChannel(1,5);">6666666</div>
            </div>
        </div>
      </div>
</div>
        
<script type=text/javascript>
//获取对象名称函数
//
function getObj(objName){return(document.getElementById(objName));}
</script>
<script type=text/javascript>
var num2=5;
function ChangeChannel(module,orderid){
for(var i=1;i<=num2;i++)
{
getObj("Channel"+module+i).className="subnav_ms";
if (orderid>1)
{
getObj("Channel"+module+1).className="subnav_ms";
}
if (orderid<5)
{
Tempid=orderid+1
getObj("Channel"+module+Tempid).className="subnav_ms";
}
getObj("Info_"+module+i).className="s2";
}
getObj("Channel"+module+orderid).className="subnav_ms";
getObj("Info_"+module+orderid).className="s1";

}
</script>
</body>
</html>

复制代码

作者：【唐】三三

出处：https://www.cnblogs.com/tangge/archive/2010/12/01/1893631.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   【唐】三三  阅读(469)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示
AI IDE Trae