固定导航列如何让当前的连结背景色变换色？

因为使用的是<iframe></iframe>，所以在上面的一行导览区会不变，能够做到mouseover和 mouseout，可是要做成在按下每个的连结后，让当前的连结（<li></li>)的背景色变为红色，让人知道它是在连结的当前页？谢谢！
<!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=gb2312" />
<title></title>
<style type="text/css">
<!--
/*通用*/
body{
font:12px Arial,Verdana,Tahoma,"宋体";
}
*{
padding:0px;
margin:0px;
}
* li{
list-style:none;
}a{
text-decoration:none;
color:#20537A;
}
a:hover{
text-decoration:underline;
}.clearfix:after{
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    _zoom: 1;
}
*+html .clearfix{
overflow:auto;
}.menu_navcc{
width:970px;
margin:0 auto;
}
.menu_nav{
width:970px;
height:48px;
background:orange;
float:left;
margin-top:18px;
}
.menu_nav .nav_content{
padding-left:25px;
background:orange;
float:left;
}
.menu_nav .nav_content li{
width:88px;
height:48px;
padding-left:15px;
padding-right:13px;
/* background:url(img/nav_li_right.gif) no-repeat right center;*/
float:left;
line-height:48px;
text-align:center;
font-size:14px;
font-weight:bold;
}
.menu_nav .nav_content li a{
color:#fff;
width:88px;
height:48px;
display:block;
}
.menu_nav .nav_content li.current{
line-height:37px;
}
.menu_nav .nav_content li em{
width:35px;
height:21px;
display:inline-block;
position:absolute;
top:-20px;
left:40px;
}.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{
width:88px;
height:37px;
background:red;
display:block;
color:#fff;
}
.menu_nav .nav_content li a:hover{
background:blue;
line-height:37px;
text-decoration:none;
}.menu_nav_right{
padding-right:20px;
background:orange;
float:right;
margin-left:50px;
padding-top:13px;
height:23px;
padding-bottom:12px;
}
p{
margin-bottom:15px;
}
-->
</style><script>
function displayContent(url)
{
document.content_frame.location.href = url;
}
</script>
</head><body>
<!--nav,start-->
<div class="menu_navcc">
<div class="menu_nav clearfix">
<ul class="nav_content">
<li class="current">
<a href="javascript:void(0);" title="首页">
<span>首页</span></a>
</li>
<li>
<a href="javascript:void(0);" title="JS广告代码">
<span>广告代码</span></a>
</li>
<li>
<a href="javascript:void(0);" title="CSS教程">
<span>CSS教程</span></a>
</li>
<li style="position:relative;">
<a href="javascript:void(0);" title="导航菜单">
<span>导航菜单</span></a><em></em>
</li>
<li>
<a href="javascript:void(0);" title="溶图素材">
<span>溶图素材</span></a>
</li>
<li>
<a href="javascript:void(0);" title="常用代码">
<span>常用代码</span></a>
</li>
</ul>
<div class="menu_nav_right">
</div>
</div>
</div>
<!--nav,end-->
<iframe src="javascript:void(0);" name="content_frame" width="100%" height="513px" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" scrolling="auto"></iframe>
</body>
</html>

解决方案 »

  1.   


    $(document).ready(function(){
        $(".nav_content").children("li").click(function(){
         $(this).addClass("background").siblings().removeClass("background");
    });
    });我用的是jquery的库
      

  2.   

    background{
      background：blue;
    }
    样式设置
      

  3.   

    .background{
    background:blue;
    }
      

  4.   


    ...
    ...
    </html><script>
    document.getElementById("menu_navcc").getElementsByTagName("li")[0].style.backgroundColor = "blue";  //[0]
    </script>