母板页中js显示问题

Question

我在使用母板页时,先在母板页中用一个table作为导航条.
然后通过点击超链接来改变当链接所在单元格的背景色,并在contentplaceholder显示相应的页面.
现在出现的问题是,点击链接后相应单元格的背景色不改变.
母板页中导航的html代码如下   <table id="navgtior" width="100%" style="background-color:Green; height:70px" border="0" cellpadding="0" cellspacing="0">
                         <tr>
                           <td colspan="4" style="height:20%">
                           </td>
                         </tr>
                         <tr style="height:80%">
                           <td style="width:10%">
                           </td>
                           <td id="hometd" style="width:11%" align="center" valign="middle">
                            <a href="Default.aspx"  onclick="ChangBackColor('hometd')">首页</a>
                           </td>
                           <td id="booktd" align="center" valign="middle" style="width:11%">
                            <a href="Book.aspx" onclick="ChangBackColor('booktd')">书籍</a> 
                           </td >
                           <td id="electid" align="center" valign="middle" style="width:11%">
                              <a href="#" onclick="ChangBackColor('electid')">电子产品</a> 
                           </td>
                           <td id="dayid" align="center" valign="middle" style="width:11%">
                            <a href="#" onclick="ChangBackColor('dayid')">日常用品</a> 
                           </td>
                           <td id="carid" align="center" valign="middle" style="width:11%">
                             <a href="#" onclick="ChangBackColor('carid')">交通工具</a>
                           </td>
                           <td id="flashionid" align="center" valign="middle" style="width:11%">
                            <a href="#" onclick="ChangBackColor('flashionid')">服装</a>
                           </td>
                           <td id="byid" align="center" valign="middle" style="width:11%">
                            <a href="Buy.aspx" onclick="ChangBackColor('byid')">求购</a>
                           </td>
                           <td style="width:10%">
                           </td>
                         </tr>
                       </table>以下是js代码: var backgroundColor="Green";//定义背景颜色
 var clickcolor="White";//定义点击颜色
 function ChangBackColor(id)
 {
  var hometd=document.getElementById('hometd');
  var booktd=document.getElementById('booktd');
  var elecid=document.getElementById('electid');
  var dayid=document.getElementById('dayid');
  var carid=document.getElementById('carid');
  var flashion=document.getElementById('flashionid');
  var byid=document.getElementById('byid');
  if(id=='hometd')
  {
   hometd.style.backgroundColor=clickcolor;
   booktd.style.backgroundColor=backgroundColor;
   elecid.style.backgroundColor=backgroundColor;
   dayid.style.backgroundColor=backgroundColor;
   carid.style.backgroundColor=backgroundColor;
   flashion.style.backgroundColor=backgroundColor;
   byid.style.backgroundColor=backgroundColor;
  }
}

Answer 1

母版下控件ID可能會變，你在IE瀏覽器的源文件中找到這些控件真正的ID，然后再document.getElementById(真正的ID)
一般都是這個樣子：ctl00_ContentPlaceHolder1_hometd

Answer 2

<table id="navgtior" width="100%" style="background-color:Green; height:70px">受这段代码的影响吧，你把整个表格的style去掉，然后试一下！

Answer 3

因为url重定向了，也就是页面重新载入了，你的js当然不管用啦
你应该在window.onload事件中判断url，以改变相应的颜色

Answer 4

二楼的说得对。是因为母板页加载的时候，会将控件的ID改变掉。所以不能直接使用该控件的ID，那样是不能获取到那个控件的ID的。使用控件的ID.ClientID就可以获得该控件的真正ID，再将这个ID传到JS方法里面就可以了。

Answer 5

window.onload = function()
{
    var url = window.location.href;
    if(url.indexof("Default.aspx") > -1)
    {
        ChangBackColor('hometd');
    }
    else if(url.indexof("Book.aspx") > -1)
    {
        ChangBackColor('booktd');
    }
    //下面的自己写了
}