<li>嵌套<a>标签的onclick事件

Question

        <ul class="navlist" id="navlist">
          <li class="current" >
            <a href="">产地特卖</a>
          </li>
          <li>
            <a href="">家电用品</a>
          </li>
          <li>
            <a href="">儿童婴儿</a>
          </li>
          <li>
            <a href="">进口专区</a>
          </li>
        </ul>

.navlist li {
    font-size: 1rem;
    width:23.4375%;
    display: inline-block;
    text-align:center;
    line-height:40px;
}

.navlist li a {
color:#fff;
display:block;
width:100%;
}

.navlist li.current a {
    background: #fff;
    border-radius:15px 15px 0 0;
}

.navlist  li.current a{
    color: #90c320;
}

window.onload=function(){
    var nav=document.getElementById("navlist");
    var list=nav.getElementsByTagName("li");
    for (i=0;i<list.length;i++){
        var tag=list[i].getElementsByTagName("a")[0];
        tag.onclick=function(){
            for(n=0;n<list.length;n++){
                list[n].className="";
            }
            list[i].className="current";
        }
    }
}

怎么实现onclick事件触发li的类名的更改。如果<a>不以块级元素显示，js我定义<li>的onclick，那么我点击<a>无法实现，如果定义<a>的onclick，怎么办。怎么设置点击li内任意区域就能触发onclick，并能更改类名

Answer 1

这个设计到css的块级与行内元素的宽高展示原理,以及事件冒泡机制.