更改母板页的样式

Question

　　好几个页面都具有重复的页面内容。我想把重复的内容抽取出来，然后弄成一个如：aa.master母板页。那问题是：
见这个图片：（汗，CSDN不知道怎么上传本地图片）
单我点击左边导航菜单的时候，每点击不同的链接打开不同的页面，我要如何更改左边被我抽出来做成母板页的样式，被点击的样式要和其他没被点击的样式不一样。如：管理供求信息　这个菜单的样式和其他菜单的样式都不一样
注：如果不用母板页采用iframe估计也是比较好做。但感觉一个大页面同时加载两个aspx页面。我感觉很怪不大舒服。
想问问各位高手有什么更好的方法－－－针对打开不用页面来改变母板的那个被点击栏目的样式。

Answer 1

晕倒图片还是弄不成功。
具体URL：http://tiancaolin.blog.163.com/prevPhoto.do?photoId=fks!081067083085082071093087086095086083082068093085081&albumId=-1
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Answer 2

还是用两个iframe做起来方便。左边的样式就用JS，DOM控制css样式就可以了。

Answer 3

新建一个模板页Site1.master，后台代码加入：
        public int nav;
        public string NavStr(int id)
        {
            return nav == id? " id=\"active\"":"";
        }前台master文件增加：
<ul id="navlist">
<li<%= NavStr(0)%>><a href="/" title="SVN首页">首页</a></li>
<li<%= NavStr(1)%>><a href="/Project/" title="SVN开源项目">项目</a></li>
<li<%= NavStr(4)%>><a href="/Article/" title="SVN文章">文章</a></li>
<li<%= NavStr(3)%>><a href="/Download/" title="下载">下载</a></li>
<li<%= NavStr(2)%>><a href="/User/MyProject.aspx" title="SVN管理中心">管理</a></li>
<li<%= NavStr(-1)%>><a href="/Help/1.shtml" title="SVN帮助中心">帮助</a></li>
</ul>然后具体的ASPX文件，引用这个模板以后，后台代码如下设置：
((Site1)this.Master).nav = 2;然后自己定一个一个样式：
ul#navlist li#active{
border-bottom: 1px solid #FFFFFF;
background-color:#FFFFFF;
}
效果参见：http://www.svnhost.cn

Answer 4

本来我有个方案，就是母板的导航菜单链接都各匹配个URL参数，然后在母板页的onload脚本事件中读取各个参数来改变各个样式。
但一直觉得每个页面都带一个参数对SEO好像不大好

Answer 5

嗯，小灰的方法挺符合asp.net面向对象开发的方法。不过过多的用.net来执行，我感觉也不是很好。我已经在小灰的那个思想上，弄出来js控制的，原理都差不多。
//获取URL参数动态更改菜单样式
function getQueryString(name) 
{ 
    // 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空 
    if(location.href.indexOf("?")==-1 || location.href.indexOf(name+'=')==-1) 
    { 
        return ''; 
    } 
 
    // 获取链接中参数部分 
    var queryString = location.href.substring(location.href.indexOf("?")+1); 
 
    // 分离参数对 ?key=value&key2=value2 
    var parameters = queryString.split("&"); 
 
    var pos, paraName, paraValue; 
    for(var i=0; i<parameters.length; i++) 
    { 
        // 获取等号位置 
        pos = parameters[i].indexOf('='); 
        if(pos == -1) { continue; } 
 
        // 获取name 和 value 
        paraName = parameters[i].substring(0, pos); 
        paraValue = parameters[i].substring(pos + 1); 
 
        // 如果查询的name等于当前name，就返回当前值，同时，将链接中的+号还原成空格 
        if(paraName == name) 
        { 
            return unescape(paraValue.replace(/\+/g, " ")); 
        } 
    } 
    return ''; 
}
//鼠标点击不同导航链接更改样式
function ChangeMenu()
{  var Menuid=getQueryString("Menuid");
  if(Menuid!="")
  {
    Menuid=escape(Menuid);
    for(i=1;i<=23;i++)
    {
      eval("Menu"+i+".className=\"Sort\";");
    }
    if(Menuid<=23)
    {
      eval("Menu"+Menuid+".className=\"Sorton\";");
    }
    
  }
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝html部分：
<div id="Sub">
<div id="Left">
<div class="BigSort" style="border-top:0px; border-bottom:0px;"><a href=".">商务助手首页</a></div>
<div class="BigSort" style="border-top:0px;"><a href=".">供求信息</a></div>
<div class="Sort" id="Menu1"><a href=".">发布供求信息</a></div>
<div class="Sort" id="Menu2"><a href=".">管理供求信息</a></div>
<div class="Sort" id="Menu3"><a href=".">我的收藏</a></div>
<div class="BigSort" id="Menu4"><a href=".">招聘中心</a></div>
<div class="Sort" id="Menu5"><a href=".">发布招聘信息</a></div>
<div class="Sort" id="Menu6"><a href=".">管理招聘信息</a></div><div class="BigSort" ><a href=".">公司资料</a></div>
<div class="Sort" id="Menu7"><a href=".">公司信息</a></div>
<div class="Sort" id="Menu8"><a href=".">发布公司动态</a></div>
<div class="Sort" id="Menu9"><a href=".">上传公司视频</a></div>
<div class="Sort" id="Menu10"><a href=".">上传公司证书</a></div>
<div class="Sort" id="Menu11"><a href=".">会员评价</a></div><div class="BigSort"><a href=".">留言管理</a></div>
<div class="Sort" id="Menu12"><a href=".">我发出的留言</a></div>
<div class="Sort" id="Menu13"><a href=".">我收到的留言</a></div><div class="BigSort"><a href=".">增值服务</a></div>
<div class="Sort" id="Menu14"><a href=".">关键字排名</a></div>
<div class="Sort" id="Menu15"><a href=".">关键字广告</a></div>
<div class="Sort" id="Menu16"><a href=".">申请金卡通会员</a></div><div class="BigSort"><a href=".">社区</a></div>
<div class="Sort" id="Menu17"><a href=".">我发表的文章</a></div>
<div class="Sort" id="Menu18"><a href=".">我的论坛收藏</a></div>
<div class="Sort" id="Menu19"><a href=".">申请金卡通会员</a></div><div class="BigSort"><a href=".">会员资料</a></div>
<div class="Sort" id="Menu20"><a href=".">修改联系信息</a></div>
<div class="Sort" id="Menu21"><a href=".">修改密码</a></div><div class="BigSort"><a href=".">帮助</a></div>
<div class="Sort" id="Menu22"><a href=".">帮助中心</a></div>
<div class="Sort" id="Menu23"><a href=".">我的问题反馈</a></div>
</div>
<div id="Right">
  <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
         
        </asp:ContentPlaceHolder>   
</div></div>

Answer 6

我在master的body　　onload事件中调用ChangeMenu（）来动态更改各个页面的样式。