css div层 切换,JS+DIV+CSS实现的经典标签切换效果代码

本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码。分享给大家供大家参考。具体如下:

这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助。

运行效果截图如下:

a4d15dc760a2dbb3fc021947efcd826e.png

在线演示地址如下:

具体代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DIV CSS布局实例:CSS标签切换代码

* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}

a {behavior:url(xuxian.htc)}

.woaicss {width:438px; height:300px; overflow:hidden; margin:50px auto;}

.woaicss_title {width:438px; height:30px; background:#fff url(images/btn_bg.png) no-repeat; overflow:hidden;}

.woaicss_title li {display:block; float:left; margin:0 2px 0 0; display:inline; text-align:center;}

.woaicss_title li a {display:block; width:90px; heigth:30px; line-height:34px; color:#fff;}

.woaicss_title li a:hover {color:#f0f0f0; text-decoration:underline;}

.woaicss_title_bg1 {background-position:0 0;}

.woaicss_title_bg2 {background-position:0 -30px;}

.woaicss_title_bg3 {background-position:0 -60px;}

.woaicss_title_bg4 {background-position:0 -90px;}

.woaicss_con {display:block; width:438px; height:270px; background:url(images/con_bg.png) no-repeat 0 0; overflow:hidden;}

.woaicss_con ul {width:418px; height:250px; margin:12px auto;}

.woaicss_con li {width:418px; line-height:30px; margin:0 auto; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;}

.woaicss_con li a {color:#03c;}

.woaicss_con li a:hover {color:#069; text-decoration:underline;}

.woaicss_copy {width:438px; margin:10px auto; text-align:center;}

.woaicss_copy a {color:#f00;}

function woaicssq(num){

for(var id = 1;id<=4;id++)

{

var MrJin="woaicss_con"+id;

if(id==num)

document.getElementById(MrJin).style.display="block";

else

document.getElementById(MrJin).style.display="none";

}

if(num==1)

document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";

if(num==2)

document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";

if(num==3)

document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";

if(num==4)

document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";

}

希望本文所述对大家的JavaScript程序设计有所帮助。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值