网页中仿msn界面效果

woainimz123456 2008-07-24 11:40:41
想做一种类似msn中界面左侧的点一些标签就能改变页面的效果
点“薪水”“EF”"交友"就能出现不同的页面
希望高手能给详细代码看看
另外我可以只用一个页面实现这样的效果吗?
就是点那些标签出现的是一个页面 而非链接多个!
...全文
238 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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程序阿?差距很大的啊
你要的是一个页面或者一个控件,不过建议你出现的详细页面还是多个页面完成可能比较好;
不然复杂的程序会有几千行代码在一个页面,修改就绝对是一件痛苦的事情!
满衣兄 2008-07-24
  • 打赏
  • 举报
回复
找找相关的控件,没这样用过,是不是和CSDN左边的那个一样的.
关注
lfywy 2008-07-24
  • 打赏
  • 举报
回复
学习!

62,243

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧