网页中仿msn界面效果

woainimz123456 2008-07-24 11:40:41

想做一种类似msn中界面左侧的点一些标签就能改变页面的效果
点“薪水”“EF”"交友"就能出现不同的页面
希望高手能给详细代码看看
另外我可以只用一个页面实现这样的效果吗？
就是点那些标签出现的是一个页面而非链接多个！

...全文

240 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

jacky00yyp 2008-07-24

打赏
举报

ajax

downmoon 2008-07-24

打赏
举报

可以考虑用ComponentArt Web.UI 2008.1

源码+完美无限制DLL+官方实例

http://bbs.topsage.com/dispbbs_123_185486_1.html

jl_lsj 2008-07-24

打赏
举报

[Quote=引用 4 楼 sunshine_anycall 的回复:]
可以。用服务端控件：Panel配合后台代码，或者用客户端控件 div配合javascript代码
[/Quote]

sunshine_anycall 2008-07-24

打赏
举报

可以。用服务端控件：Panel配合后台代码，或者用客户端控件 div配合javascript代码

sy_binbin 2008-07-24

打赏
举报

<!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=utf-8" />
<title>163Tag</title>
<style>
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
ul,h6{margin:0; padding:0;}
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:Active {color: #bc2931;}
.adMenu{ height:26px; background-image:url(http://album.sina.com.cn/pic/4b6afee302000q31);width:300px;}
.adMenu ul{}
.adMenu li{float:left; width:60px; height:26px; list-style-type:none;cursor:pointer;line-height:26px}
.adMenu .normal{background:url(http://cimg2.163.com/cnews/163/img6/admenu_bg2.gif);}
.adMenu .active{background:url(http://cimg2.163.com/cnews/163/img6/admenu_bg1.gif);}
.adMenu a{color:#1f3a87;}
.adMenu a:visited{color:#1f3a87;}
.Admenu a:hover{color:#bc2931;}
</style>
</head>
<script>
eMenu={
initialize:function(){
this.initView();
},
tagInstance:null,
config:{tagItem:{}},
initView:function(){
this.tagInstance=document.getElementById("adMenu")
var itemHtml='<ul><li class="normal">资讯</li>\
<li class="normal">教育</li>\
<li class="normal">房产</li>\
<li class="active">招商</li>\
<li class="normal">拍卖</li><ul>';
this.addHTML(this.tagInstance,itemHtml);
this.config.tagItem=document.getElementsByTagName("li");
this.initControl();
},
initControl:function(){
var _this=this;
var length=this.config.tagItem.length;
for(var i=0;i<length;i++){
this.config.tagItem[i].onclick=click;
}
function click(e){
var node=_this.config.tagItem;
var event=e||window.event;
var srcElement =event.srcElement||event.target;
for(var i=0;i<node.length;i++){
if(node[i].className=="active"){
node[i].className="normal"
}
if(node[i]==srcElement){
node[i].className="active"
}
}
}
},
addHTML:function(oParentNode,html){
if(document.implementation.hasFeature("Range","2.0")){
var range=document.createRange();
range.setStartBefore(oParentNode);
var Frag=range.createContextualFragment(html);
oParentNode.appendChild(Frag);
}else{
oParentNode.insertAdjacentHTML("beforeEnd",html);
}
}
}
window.onload=function(){
eMenu.initialize();
}
</script>
<body>
<div style="height:40px"></div>
<div id="adMenu" class="adMenu">

</div>
</body>
</html>

<!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=utf-8" /> <title>163Tag</title> <style> body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;} ul,h6{margin:0; padding:0;} a:link {color: #1f3a87; text-decoration:none;} a:visited {color: #83006f;text-decoration:none;} a:hover {color: #bc2931; text-decoration:underline;} a:Active {color: #bc2931;} .adMenu{ height:26px; background-image:url(http://album.sina.com.cn/pic/4b6afee302000q31);width:300px;} .adMenu ul{} .adMenu li{float:left; width:60px; height:26px; list-style-type:none;cursor:pointer;line-height:26px} .adMenu .normal{background:url(http://cimg2.163.com/cnews/163/img6/admenu_bg2.gif);} .adMenu .active{background:url(http://cimg2.163.com/cnews/163/img6/admenu_bg1.gif);} .adMenu a{color:#1f3a87;} .adMenu a:visited{color:#1f3a87;} .Admenu a:hover{color:#bc2931;} </style> </head> <script> eMenu={ initialize:function(){ this.initView(); }, tagInstance:null, config:{tagItem:{}}, initView:function(){ this.tagInstance=document.getElementById("adMenu") var itemHtml='<ul><li class="normal">资讯</li>\ <li class="normal">教育</li>\ <li class="normal">房产</li>\ <li class="active">招商</li>\ <li class="normal">拍卖</li><ul>'; this.addHTML(this.tagInstance,itemHtml); this.config.tagItem=document.getElementsByTagName("li"); this.initControl(); }, initControl:function(){ var _this=this; var length=this.config.tagItem.length; for(var i=0;i<length;i++){ this.config.tagItem[i].onclick=click; } function click(e){ var node=_this.config.tagItem; var event=e||window.event; var srcElement =event.srcElement||event.target; for(var i=0;i<node.length;i++){ if(node[i].className=="active"){ node[i].className="normal" } if(node[i]==srcElement){ node[i].className="active" } } } }, addHTML:function(oParentNode,html){ if(document.implementation.hasFeature("Range","2.0")){ var range=document.createRange(); range.setStartBefore(oParentNode); var Frag=range.createContextualFragment(html); oParentNode.appendChild(Frag); }else{ oParentNode.insertAdjacentHTML("beforeEnd",html); } } } window.onload=function(){ eMenu.initialize(); } </script> <body> <div style="height:40px"></div> <div id="adMenu" class="adMenu"> </div> </body> </html>

woainimz123456 2008-07-24

打赏
举报

可以给个详细的代码吗！！
以前一直搞java
公司突然用asp
刚接触不久
谢谢

bradring 2008-07-24

打赏
举报

用asp.net的主题技术就可以实现

kwh050101 2008-07-24

打赏
举报

iframe

OOQQOO 2008-07-24

打赏
举报

CSDN就是很好的例子

qyulang 2008-07-24

打赏
举报

iframe?

hy_lihuan 2008-07-24

打赏
举报

[Quote=引用楼主 woainimz123456 的帖子:]
另外我可以只用一个页面实现这样的效果吗？
就是点那些标签出现的是一个页面而非链接多个！
[/Quote]
asp.net还是asp程序阿？差距很大的啊
你要的是一个页面或者一个控件，不过建议你出现的详细页面还是多个页面完成可能比较好；
不然复杂的程序会有几千行代码在一个页面，修改就绝对是一件痛苦的事情！