导航条问题

这个就有矛盾了
因为你ONCLICK点击，有可能你都还没看到点击变色的效果就已经运行ONMOUSEOVER变色了

解决方案 »

  1.   

    LZ是指  变色  是一个按钮吧.
     全局bool标记不就行了..
      

  2.   

    要点击就一定要ONMOUSEOVER把 你要是只是改变点击后改变颜色，用下a标签里的几个link ,在body里面设置。
      

  3.   

    鼠标移动的时候 导航里的菜单项会改变颜色, 而点击后 也会改变颜色,而且固定.onclick="change(this)" onMouseOver="this.className='bgcolor'" onMouseOut="this.className=''" 
    这样的代码为什么不能实现? 实现的时候移动是在变色  但当点击一次后 再移动就没有变色效果了.
      

  4.   

    ...CSS里我知道啊..可是问题是 点击一次后  再移动鼠标就没有变色效果了    如何解决呢
      

  5.   

    我这个有个简单的例子，按自己要求再改下window.onload = initAll;function initAll() {
    var allLinks = document.getElementsByTagName("a");

    for (var i=0; i<allLinks.length; i++) {
    if (allLinks[i].className.indexOf("menuLink") > -1) {
    allLinks[i].onclick = toggleMenu;
    }
    }
    }function toggleMenu() {
    var startMenu = this.href.lastIndexOf("/")+1;
    var stopMenu = this.href.lastIndexOf(".");
    var thisMenuName = this.href.substring(startMenu,stopMenu); var thisMenu = document.getElementById(thisMenuName).style;
    thisMenu.display = (thisMenu.display == "block") ? "none" : "block"; return false;
    }css
    body {
    background-color: white;
    color: black;
    }div {
    margin-bottom: 10px;
    }ul.menu {
    display: none;
    list-style-type: none;
    margin-top: 5px;
    }a.menuLink {
    font-size: 16px;
    font-weight: bold;
    }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Shakespeare's Plays</title>
    <link rel="stylesheet" rev="stylesheet" href="script01.css" />
    <script type="text/javascript" language="Javascript" src="script01.js">
    </script>
    </head>
    <body>
    <h1>Shakespeare's Plays</h1>
    <div>
    <a href="menu1.html" class="menuLink">Comedies</a>
    <ul class="menu" id="menu1">
    <li><a href="pg1.html">All's Well That Ends Well</a></li>
    <li><a href="pg2.html">As You Like It</a></li>
    <li><a href="pg3.html">Love's Labour's Lost</a></li>
    <li><a href="pg4.html">The Comedy of Errors</a></li>
    </ul>
    </div>
    <div>
    <a href="menu2.html" class="menuLink">Tragedies</a>
    <ul class="menu" id="menu2">
    <li><a href="pg5.html">Anthony &amp; Cleopatra</a></li>
    <li><a href="pg6.html">Hamlet</a></li>
    <li><a href="pg7.html">Romeo &amp; Juliet</a></li>
    </ul>
    </div>
    <div>
    <a href="menu3.html" class="menuLink">Histories</a>
    <ul class="menu" id="menu3">
    <li><a href="pg8.html">Henry IV, Part 1</a></li>
    <li><a href="pg9.html">Henry IV, Part 2</a></li>
    </ul>
    </div>
    </body>
    </html>
      

  6.   

    你change里面什么内容啊，最好代码贴出来
    <style>
    .bgcolor { background-color:#CCCCCC }
    .bgcolor1 { background-color:#666666 }
    </style>
    <script>
    function change(obj) {
    obj.className = "bgcolor1";
    }
    </script>
    <center>
    <div id="test1" style="cursor:hand" onClick="change(this)" onMouseOver="this.className='bgcolor'" onMouseOut="this.className=''" >点我一下</div>
    </center>
    这样会不能实现？
      

  7.   

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    .bgstyle{
    background-color:#99ff00;}
    </style>
    <SCRIPT language=JavaScript>
     function secBoard(n)
       {
        for(i=1;i<7;i++)
        {
         eval("document.getElementById('cel"+i+"').style.background=''");
        }
        eval("document.getElementById('cel"+n+"').style.background='0099ff'");
    }
    </SCRIPT>
    </head><body> <table border="1" width="150px" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="cccccc" id="table29">
           <tr>
            <td  bgcolor="0099ff" id=cel1 onclick=secBoard(1) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">122334</td>
           </tr>
           <tr>
            <td id=cel2 onclick=secBoard(2) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">5435343</td>
           </tr>
           <tr>
            <td id=cel3 onclick=secBoard(3) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">32323</td>
           </tr>
           <tr>
            <td id=cel4 onclick=secBoard(4) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">545454</td>
           </tr>
           <tr>
            <td id=cel5 onclick=secBoard(5) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">32323</td>
           </tr>
       <tr>
       <td id=cel6 onClick=secBoard(6) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">655656</td></tr>
          </table>
    </body>
    </html>  这是我的写的源码  好想问题出在  JAVASCRIPT 的eval("document.getElementById('cel"+i+"').style.background=''");这句上,不知道如何改正.不知道那位大虾帮忙看看 
      

  8.   

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    .bgstyle{
    background-color:#99ff00;}
    </style>
    <SCRIPT language=JavaScript>
     function secBoard(n)
       {
        for(i=1;i<7;i++)
        {
         eval("document.getElementById('cel"+i+"').style.background=''");
        }
        eval("document.getElementById('cel"+n+"').style.background='0099ff'");
        }
    </SCRIPT>
    </head><body> <table border="1" width="150px" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="cccccc" id="table29">
           <tr>
            <td  bgcolor="0099ff" id=cel1 onclick=secBoard(1) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">122334</td>
           </tr>
           <tr>
            <td id=cel2 onclick=secBoard(2) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">5435343</td>
           </tr>
           <tr>
            <td id=cel3 onclick=secBoard(3) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">32323</td>
           </tr>
           <tr>
            <td id=cel4 onclick=secBoard(4) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">545454</td>
           </tr>
           <tr>
            <td id=cel5 onclick=secBoard(5) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">32323</td>
           </tr>
           <tr>
           <td id=cel6 onClick=secBoard(6) style="cursor:hand" height="25" align="center" onMouseOver="this.className='bgstyle'" onMouseOut="this.className=''">655656</td></tr>
          </table>
    </body>
    </html>
        这是我的写的源码  好想问题出在  JAVASCRIPT 的eval("document.getElementById('cel"+i+"').style.background=''");这句上,不知道如何改正.
      

  9.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <style type="text/css">
                .bgstyle {
                    background: #99ff00;
                }
            </style>
            <SCRIPT language=JavaScript>
                var $ = document.getElementById;
                
                window.onload = function(){
                    for (var i = 1; i < 7; i++) {
                        var o = $("cel" + i);
                        
                        o.onmouseover = function(){
                            this.className = 'bgstyle';
                        }
                        o.onmouseout = function(){
                            this.className = '';
                        }
                        
                        o.onclick = function(){
                            for (var i = 1; i < 7; i++) {
                                var o = $("cel" + i);
                                var t = o.className;
                                if (this == o) {
                                    o.bgColor = '0099ff';
                                }
                                else {
                                    o.bgColor = '';
                                }
                            }
                        }
                    }
                }
            </SCRIPT>
        </head>
        <body>
            <table border="1" width="150px" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="cccccc" id="table29">
                <tr>
                    <td bgcolor="0099ff" id=cel1 style="cursor:hand" height="25" align="center">
                        122334
                    </td>
                </tr>
                <tr>
                    <td id=cel2 style="cursor:hand" height="25" align="center">
                        5435343
                    </td>
                </tr>
                <tr>
                    <td id=cel3 style="cursor:hand" height="25" align="center">
                        32323
                    </td>
                </tr>
                <tr>
                    <td id=cel4 style="cursor:hand" height="25" align="center">
                        545454
                    </td>
                </tr>
                <tr>
                    <td id=cel5 style="cursor:hand" height="25" align="center">
                        32323
                    </td>
                </tr>
                <tr>
                    <td id=cel6 style="cursor:hand" height="25" align="center">
                        655656
                    </td>
                </tr>
            </table>
        </body>
    </html>
      

  10.   

    var t = o.className;这句没有用，把它删掉。