导航栏的样式问题

Question

<div class='cssmenu'>

        <ul>
            <li class='active'><a href='index.jsp'><span>首页</span></a></li>
            <li><a href='recommend.jsp'><span>热门图书</span></a></li>
            <li><a href='staff.html'><span>图书检索</span></a></li>
            <li><a href='contact.html'><span>我的</span></a></li>
             <div class="clear"></div>
         </ul>

</div>

有个导航栏是这样，想根据点击的超链接激活class='active' 这个样式，要如何实现？

点击导航栏会跳进对应的页面，还能用js吗？

点击首页，首页会有红色背景，并跳转到首页的页面

点击热门图书，热门图书会有红色背景，会跳转到热门图书的页面

Answer 1

var&nbsp;li&nbsp;=&nbsp;document.querySelectorAll('li');for(var&nbsp;i&nbsp;=&nbsp;0,len&nbsp;=&nbsp;li.length;li&nbsp;<&nbsp;len;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li[i].index&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li[i].onclick&nbsp;=&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;_i&nbsp;=&nbsp;0,_len&nbsp;=&nbsp;li.length;_i&nbsp;<&nbsp;_len;_i++){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(_i&nbsp;===&nbsp;this.index){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li[_i].className&nbsp;=&nbsp;'active';//或者li[_i].classList.add('active') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;li[_i].className="";//或者li[_i].classList.remove('active'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} }