最近在学习Bootstrap,发现真的很棒呐~不管是拿来用还是拿来学习,都值得借鉴。

在弄后台界面的时候,发现后台跟前台的界面做法还是有点不同的,首先后台的导航条最好不需要刷新,所以我就采用了frame框架来做,其实也是看了其他人的后台后才这么做的,然后后台的导航条也得需要高亮显示,让管理员知道现在在什么模块上,前台的话最简单的就是相应的页面导航上加个高亮样式就行了,但是后台由于导航条是用的同一个,不刷新的,所以就得用到js了,可是我JS还不会哈~借鉴了别人的代码,效果终于实现了。

方法如下:

1、首先写入JS代码

[cce_js]
<script language="JavaScript">
    jQuery.noConflict();
    function sethighlight(n) {
    var lis = document.getElementById("top_menu").getElementsByTagName('li');
    for(var i = 0; i < lis.length; i++) {
    lis[i].className = '';
    }
    lis[n].className = 'active';
    }
    sethighlight(0);
</script>
[/cce_js]

上面代码需要注意的是 top_menu   li   active

其中 top_menu 是你导航所在层的ID

li 就是导航栏目

active 就是高亮样式

2、调用方法:

例如

<ul id=”top_menu”>
<li><a href=”#” onClick=”sethighlight(0); “>导航一</a>
</li>
<li><a href=”#” onClick=”sethighlight(1); “>导航二</a>
</li>
</ul>
需要注意的是 sethighlight 是按顺序依次来的,
sethighlight(0)
sethighlight(1)
sethighlight(2)
sethighlight(3)
具体用法,大家慢慢体会。