网页菜单的背景

Question

参考
<style>
#current {color:#f00}
#current a:link,#current a:visited {color:#f00; font-weight:bold;}
</style>
<div id="menu">
<ul>
        <li id="current"><a href="#"><span>主页</span></a></li>
        <li><a href="#"><span>博客</span></a></li>
        <li><a href="#"><span>图片</span></a></li>
    </ul>
</div>
<script>
function ch(){
var lis = document.getElementById('menu').getElementsByTagName('li'), cur_li = lis[0];
for(var i=0; i<lis.length; i++){
lis[i].onclick  = function(){
if(cur_li != this){
cur_li.id = '';
this.id = 'current';
cur_li = this;
}
}
}
}
window.onload = ch;
</script>

Answer 1

[code=HTML]
<div id="menu">
<ul>
        <li onclick="changeId(this)"><a href="#"><span>主页</span></a></li>
        <li onclick="changeId(this)"><a href="#"><span>博客</span></a></li>
        <li onclick="changeId(this)"><a href="#"><span>图片</span></a></li>
    </ul>
</div><script>
function changeId(myli)
{
var mydiv = document.getElementById("menu");
var allLi = document.getElementsByTagName("li");
for(var i = 0; i < allLi.length; i++)
{
allLi[i].removeAttribute("id");
}
myli.setAttribute("id", "current");
for(var i = 0; i < allLi.length; i++)
{
alert(allLi[i].getAttribute("id"));
}
}
</script>[code]
点击第i个li则弹出的第i个对话框的数据为current,说明设置了其id为current

Answer 2

<style>
    #current {color:#f00}
    #current a:link,#current a:visited {color:#f00; font-weight:bold;}
</style>
<div id="menu">
<ul>
        <li id="current"><a href="#"><span>主页</span></a></li>
        <li><a href="#"><span>博客</span></a></li>
        <li><a href="#"><span>图片</span></a></li>
    </ul>
</div>
<script>
    function ch(){
        var lis = document.getElementById('menu').getElementsByTagName('li'), cur_li = lis[0];
        for(var i=0; i<lis.length; i++){
            lis[i].onclick  = function(){
                if(cur_li != this){
                    cur_li.id = '';
                    this.id = 'current';
                    cur_li = this;
                }
            }
        }
    }
    window.onload = ch;
</script>