当前页面在哪里,对应的导航栏上的该页锚点乃是对应的颜色
当前页面在哪里,对应的导航栏上的该页锚点就是对应的颜色
想到用DIV+url+li来做:
当前页面为 “首页” 时,导航栏这样显示:
当前页面为“公司介绍”时,如下显示
。。。。。。。以此类推。
注意,我的网站程序模板页面只有一个index.asp。
跳转到不同页面是用“index.asp?id=xxx” + 数据库 的形式来实现的
请问此功能如何实现
效果以下截图:
另一种效果:
------解决方案--------------------
我有个比较笨的方法:
1,在index.asp里,导航栏上所有的<li>都这样命名:<li class="classid">....</li>
2,在你的目标页面id数据库字段里,给这个变量赋值:classid="clickname"
搞定!
但是弊端也出来了:会给数据库服务器造成负载。
最好的方法是用JS直接在当前页判断,这样对服务器没有负载,全部交给客户机处理了。
------解决方案--------------------
js获取参数进行分析,然后和导航进行对比,包含参数就设置这个导航的样式
------解决方案--------------------
你的首页链接不在第一个位置,在第二个,要修改下标
//如果找不到参数,设置默认为首页
if (!find) as[1].className = 'clickname';
------解决方案--------------------
还有个bug,没有判断是否有参数。。改下面这样
想到用DIV+url+li来做:
当前页面为 “首页” 时,导航栏这样显示:
<div class="main_nav">
<ul id="main_nav_ul">
<li class="clickname" ><a href="/">首页</a></li> "这里显示为当前页面
<li ><a href="/">公司介绍</a></li>
<li ><a href="/">联系我们</a></li>
</ul>
</div>
当前页面为“公司介绍”时,如下显示
<div class="main_nav">
<ul id="main_nav_ul">
<li ><a href="/index.asp">首页</a></li>
<li class="clickname" ><a href="/index.asp?id=102">公司介绍</a></li>"这里显示为当前页面
<li ><a href="//index.asp?id=103">联系我们</a></li>
</ul>
</div>
。。。。。。。以此类推。
注意,我的网站程序模板页面只有一个index.asp。
跳转到不同页面是用“index.asp?id=xxx” + 数据库 的形式来实现的
请问此功能如何实现
效果以下截图:
另一种效果:
------解决方案--------------------
我有个比较笨的方法:
1,在index.asp里,导航栏上所有的<li>都这样命名:<li class="classid">....</li>
2,在你的目标页面id数据库字段里,给这个变量赋值:classid="clickname"
搞定!
但是弊端也出来了:会给数据库服务器造成负载。
最好的方法是用JS直接在当前页判断,这样对服务器没有负载,全部交给客户机处理了。
------解决方案--------------------
js获取参数进行分析,然后和导航进行对比,包含参数就设置这个导航的样式
<div class="main_nav">
<ul id="main_nav_ul">
<li><a href="/index.asp">首页</a></li>
<li><a href="/index.asp?id=102">公司介绍</a></li>"这里显示为当前页面
<li ><a href="/index.asp?id=103">联系我们</a></li>
</ul>
</div>
<script>
var as = document.getElementById('main_nav_ul').getElementsByTagName('a'),find=false,
s = location.search; //得到参数
for (var i = 0; i < as.length; i++)
if (as[i].href.indexOf(s) != -1) {
as[i].className = 'clickname';
find = true;
break;
}
//如果找不到参数,设置默认为首页
if (!find) as[0].className = 'clickname';
</script>
------解决方案--------------------
你的首页链接不在第一个位置,在第二个,要修改下标
//如果找不到参数,设置默认为首页
if (!find) as[1].className = 'clickname';
------解决方案--------------------
还有个bug,没有判断是否有参数。。改下面这样
var as = document.getElementById('main_nav_ul').getElementsByTagName('a'), find = false, s = location.search; //得到参数
if (s != '')
for (var i = 0; i < as.length; i++) {
if (as[i].href.indexOf(s) != -1) {
as[i].className = 'clickname';
find = true;
break;
}
}
if (s == ''
------解决方案--------------------
!find) as[1].className = 'clickname';