当前页面在哪里，对应的导航栏上的该页锚点就是对应的颜色
想到用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';
------解决方案-------