求网页左侧导航栏 鼠标点击后字体变色

左侧导航栏是用循环语句从数据库里读取出来的,是否有js语句使点击后文字颜色改变以示突出,而其他的不变,点击其他文字时这个又变成原来的颜色,请大家帮忙谢谢~!!!

解决方案 »

  1.   

    自己写个传参的方法,用onclick事件来传递参数。函数里面写判断。
      

  2.   

    替换CSS样式...
     导航栏使用 <a></a> 标签来做, 给每个<a>标签添加onclick事件(事件处理函数返回值必须是false,禁止浏览器默认动作)...至于变色仅仅是修改了一下css样式而已...
      

  3.   

    代码如下:
    css文件:
    navigate.css
    body {
    font-size:12px;
    font-family: Arial, Helvetica, sans-serif;
    }.big-bold {
    font-size:14px;
    font-weight:bold;
    color:#000;
    }.normal {
    font-size:12px;
    font-weight:normal;
    color:#666;
    }
    html代码如下:
    naviage.html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <link type="text/css" rel="stylesheet" href="css/navigate.css" />
    <script type="text/javascript" src="javascript/navigate.js"></script>
    </head>
    <body>
    <ul>
    <li>
    <a href="#">首页</a>
    </li>
    <li>
    <a href="#">联系我们</a>
    </li>
    <li>
    <a href="#">帮助</a>
    </li>
    </ul>
    </body>
    </html>
    javascript代码:
    navigate.js/**
     * @author lvjian
     */
    window.onload = initLinkStyle;function initLinkStyle() {
    if(document.getElementsByTagName('a')){
    var arrLink = document.getElementsByTagName('a');
    for(i = 0; i < arrLink.length; i++) {
    var link = arrLink[i];
    link.className='normal';
    link.onclick = clickNav;
    }
    }
    }/**
     * 执行点击事件
     * @param {Object} event 鼠标事件
     */
    function clickNav(event) {
    var target = event.currentTarget;

    //擦出上次选择的a的样式
    if(document.getElementsByTagName('a')){
    var arrLink = document.getElementsByTagName('a');
    for(i = 0; i < arrLink.length; i++) {
    var link = arrLink[i];
    if(link.className == 'big-bold') {
    link.className = 'normal';
    }
    }
    }

    target.className = 'big-bold';

    return false;//阻止浏览器默认事件
    }
      

  4.   

    谢谢,能给个代码让我参考一下吗?
    左侧代码:
                <div id="left_link">
                    <ul>
                    <li>
                        <a href="about_us.asp?id=<%=id%>"><%=kind%></a>
                    </li>
                    </ul>
                </div>
      

  5.   

            <div id="left_link"> 
                    <ul> 
                    <li> 
                        <a href="about_us.asp?id= <%=id%>"> <%if Cint(request("id"))=Cint(id) then %>
    <font color=red>
     <%=kind%> 
    </font>
    <%end if %></a> 
                    </li> 
                    </ul> 
                </div>
      

  6.   


    <style>
    .red{color:red}
    </style>
    <body>
    <div id="left_link"> 
        <ul> 
          <li> <a href="about_us.asp?id=<%=id%>" target="right_main"> <%=kind%> -1</a> </li> 
        <li> <a href="about_us.asp?id=<%=id%>" target="right_main"> <%=kind%> -2</a> </li> 
        <li> <a href="about_us.asp?id=<%=id%>" target="right_main"> <%=kind%> -3</a> </li> 
        <li> <a href="about_us.asp?id=<%=id%>" target="right_main"> <%=kind%> -4</a> </li> 
        </ul> 
    </div>
    <script language="javascript">
    <!--
    function init(){
    var obj=document.getElementById("left_link").getElementsByTagName("a"),j=obj.length;
    for (var i=0;i<j;i++){
    obj[i].onclick=function(){chang_color(this)}
    }
    }
    function chang_color(_this){
    var obj=document.getElementById("left_link").getElementsByTagName("a"),j=obj.length;
    for (var i=0;i<j;i++)obj[i].style.color="#000"
    _this.style.color="#f00"
    }
    /*
    //or:
    function chang_color(_this){
    var obj=document.getElementById("left_link").getElementsByTagName("a"),j=obj.length;
    for (var i=0;i<j;i++)obj[i].className=""
    _this.className="red"
    }
    */onload=init
    //-->
    </script>
    </body>