最近在学习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)
具体用法,大家慢慢体会。