设为首页收藏本站

开启辅助访问切换到宽版

新微赢技术网»论坛 › 学习网知识堂 › WEB开发 › ASP › [讨论]像中华网这样的层技术,是怎么实现的?

发新帖

查看: 67|回复: 7

上一主题

下一主题

[讨论]像中华网这样的层技术,是怎么实现的?

电梯直达

跳转到指定楼层

1^#

发表于 2010-1-7 07:28:13 | 只看该作者回帖奖励

回帖奖励

|正序浏览 |阅读模式

http://www.china.com中间的那个新闻\品味\健康\宽频等的那个层,一个定时自己转换,另一个时点上面的键接出现对应的层,是怎么实现的,哪位大哥知道.

回复

使用道具举报

6^#

发表于 2010-1-7 07:28:28 | 只看该作者

<style>
* {margin:0;padding:0;font-size:12px;font-family:Verdana, Arial, "宋体"; list-style:none;}
body {background: #FFFFCC;margin:100px 0 0 100px;}
#info {border:1px solid #FFCC66;padding:30px;background:#f7f7f7;width:500px;}
#kjj_tag {width:500px;border-bottom:1px solid #CCC; background:url(o200742501718.gif) repeat-x left bottom;height:30px;}
#info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; padding:10px; background:#fff; clear:both; }
h4{ font-weight:normal;float:left;border-right:1px solid #fff;}
.hd {display:none;}
.sw {display:block;}
#info li {float:left;}
#info li a{float:left; display:block; padding:4px 10px 4px 10px; color:#37572E; text-decoration:none}
#info li a:hover{ background:#E9FE70; color:#000}
#info ul { float:left; margin-top:-28px; padding:5px 0; position:absolute}
#info .ha a{ color:#FFF}
#info .ha a:hover{color:#FFF; background:none}
#info .ha .hc:hover{background:url(5200742501725.gif) no-repeat center bottom; }
.ha {background:url(a20074250170.gif) no-repeat left top;margin-top:-3px;padding-top:3px;}
.hb{ background:url(x200742501712.gif) no-repeat right top; margin-top:-3px; padding-top:3px;}
.hc {background:url(5200742501725.gif) no-repeat center bottom; height:17px; color:#FFF; font-weight:bold}
</style>
<script language="javascript">
var k = Math.floor(Math.random()*5+1);
for(i=1; i <6; i++){
if( i==k){
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).className="ha";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
}
else{
document.getElementById("info"+i).className="hd";
}
}
function kijijitag(tag){
for(i=1; i <6; i++)
{
if (i==tag)
{
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).className="ha";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
}
else{
document.getElementById("info"+i).className="hd";
document.getElementById("tag"+i).className="";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
}
}
}
</script>
<div id="info">
<div id="kjj_tag"> </div>
<ul>
<li id="tag1"><h4><a href="javascript:kijijitag('1');">热门活动</a></h4></li>
<li id="tag2"><h4><a href="javascript:kijijitag('2');" >最新功能</a></h4></li>
<li id="tag3"><h4><a href="javascript:kijijitag('3');" >服务承诺</a></h4></li>
<li id="tag4"><h4><a href="javascript:kijijitag('4');" >最新成功故事</a></h4></li>
<li id="tag5"><h4><a href="javascript:kijijitag('5');" >热贴推荐</a></h4></li>
</ul>
<div id="info1"><a href="http://www.zishu.cn" target="blank">子鼠00001</a></div>
<div id="info2"><a href="http://www.zishu.cn" target="blank">子鼠00002</a></div>
<div id="info3"><a href="http://www.zishu.cn" target="blank">子鼠00003</a></div>
<div id="info4"><a href="http://www.zishu.cn" target="blank">子鼠00004</a></div>
<div id="info5"><a href="http://www.zishu.cn" target="blank">子鼠00005</a></div>
</div>

看看子鼠大哥的这个对你有用没

回复支持反对

使用道具举报

大天使路西法

5^#

发表于 2010-1-7 07:28:25 | 只看该作者

javascript那里看看吧有你想要的

回复支持反对

使用道具举报

枫之泪-天涯

4^#

发表于 2010-1-7 07:28:22 | 只看该作者

谢了,我试一试了.

回复支持反对

使用道具举报

|°妳卟懂莪

3^#

发表于 2010-1-7 07:28:19 | 只看该作者

还有这个 AJAX做的看看对你有帮助没
附件: 只有本站会员才能下载或查看附件，请您登录或注册

回复支持反对

使用道具举报

═━灆涩━═

2^#

发表于 2010-1-7 07:28:16 | 只看该作者

呵呵,你可以给一个看一看吗?我已经找了很多了,没有我想要结果.

回复支持反对

使用道具举报

发新帖

申请友链|小黑屋|最新主题|手机版|新微赢技术网 ( 苏ICP备08020429号 )

GMT+8, 2024-11-19 06:21 , Processed in 0.125792 second(s), 10 queries , Gzip On, Memcache On.

Powered by xuexi

© 2001-2013 HaiAn.Com.Cn Inc. 寰耽

快速回复 返回顶部 返回列表