网页中仿msn界面效果

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

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用asp.net的主题技术就可以实现
可以给个详细的代码吗！！
以前一直搞java
公司突然用asp
刚接触不久
谢谢
<!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>
可以。用服务端控件：Panel配合后台代码，或者用客户端控件 div配合javascript代码
可以考虑用ComponentArt Web.UI 2008.1 源码+完美无限制DLL+官方实例http://bbs.topsage.com/dispbbs_123_185486_1.html
找找相关的控件,没这样用过,是不是和CSDN左边的那个一样的.
关注
asp.net还是asp程序阿？差距很大的啊
你要的是一个页面或者一个控件，不过建议你出现的详细页面还是多个页面完成可能比较好；
不然复杂的程序会有几千行代码在一个页面，修改就绝对是一件痛苦的事情！