单击弹出下拉菜单问题.

现写了一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>点击菜单</TITLE>
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//菜单总数
menunum = 3; //菜单开关
function switchMenu(n){
for (var i=1; i<=menunum; i++)
{
if (i==n){
$("menucon"+i).style.display="";
}else{
$("menucon"+i).style.display="none";
}
}
} //获取对象
function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}//-->
</SCRIPT>
<style>
body {
font-size:12px;
line-height:30px;
}
.menubox {
width:200px;
background-color:#EAEAEA;
cursor:normal;
}
.menutitle {
width:200px;
height:30px;
background-color:#999999;
color:#FFFFFF;
cursor:pointer;
text-align:center;
border-top:#FFFFFF 1px solid;
}
.menucontent {
width:200px;
height:120px;
background-color:#CCCCCC;
cursor:normal;
padding:10px;
}
</style>
 <BODY>
  <div class="menubox">
<div class="menutitle" id="menu1" onclick="switchMenu(1)">菜单标题</div>
<div class="menucontent" id="menucon1" style="display:block;">菜单内容</div>
<div class="menutitle" id="menu2" onclick="switchMenu(2)">菜单标题</div>
<div class="menucontent" id="menucon2" style="display:none;">菜单内容</div>
<div class="menutitle" id="menu3" onclick="switchMenu(3)">菜单标题</div>
<div class="menucontent" id="menucon3" style="display:none;">菜单内容</div>
</div>
 </BODY>
</HTML>

解决方案 »

  1.   

    要这种效果的        <!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; charsetgb2312" />
    <title>导航栏 - 分享JavaScript-sharejs.com</title>
    <script>
    function show(c_Str)
    {if(document.all(c_Str).style.display=='none')
    {document.all(c_Str).style.display='block';}
    else{document.all(c_Str).style.display='none';}}
    function high(){
    if (event.srcElement.className=="k"){
    event.srcElement.style.background="336699"
    event.srcElement.style.color="white"
    }
    }
    function low(){
    if (event.srcElement.className=="k"){
    event.srcElement.style.background="99CCFF"
    event.srcElement.style.color=""
    }
    }
    </script><style>td { cursor: hand; font-family: Tahoma; background-color: #336699; color: #99CCFF; 
                   font-size: 10pt }
    li           { color: #FF0000; font-family: Tahoma; background-color: #99CCFF; font-size: 9pt}
    .up{ background-color: #3A6EA5; border-left: 1 solid #A6C1DF;border-right: 1 solid #002200; border-top: 1 solid #A6C1DF; border-bottom: 1 solid #002200 }
    </style>
    </head>
    <body>
    <div align="left">
      <table border="0" width="285" cellspacing="0" cellpadding="0">
        <tr>
          <td><div class=up onclick=show("a0")>+01-10</div><div onmouseover=high() onmouseout=low()  id=a0 style="display:none">
    <li class=k>01</li>
    <li class=k>02</li>
    <li class=k>03</li>
    <li class=k>04</li>
    <li class=k>04</li>
    <li class=k>05</li>
    <li class=k>06</li>
    <li class=k>07</li>
    <li class=k>08</li>
    <li class=k>09</li>
    <li class=k>10</li>
          </div></td>
        </tr>
        <tr>
          <td><div class=up onclick=show("a1")>+11-20</div><div onmouseover=high() onmouseout=low()  id=a1 style="display:none">
    <li class=k>11</li>
    <li class=k>12</li>
    <li class=k>13</li>
    <li class=k>14</li>
    <li class=k>15</li>
    <li class=k>16</li>
    <li class=k>17</li>
    <li class=k>18</li>
    <li class=k>19</li>
    <li class=k>20</li>
          </div></td>
        </tr>
        <tr>
          <td><div class=up onclick=show("a2")>+21-30</div><div onmouseover=high() onmouseout=low()  id=a2 style="display:none">
    <li class=k>21</li>
    <li class=k>22</li>
    <li class=k>23</li>
    <li class=k>24</li>
    <li class=k>25</li>
    <li class=k>26</li>
    <li class=k>27</li>
    <li class=k>28</li>
    <li class=k>29</li>
    <li class=k>30</li>
          </div></td>
        </tr>
                <tr>
          <td><div class=up onclick=show("a3")>+31-40</div><div onmouseover=high() onmouseout=low()  id=a3 style="display:none">
    <li class=k>31</li>
    <li class=k>32</li>
    <li class=k>33</li>
    <li class=k>34</li>
    <li class=k>35</li>
    <li class=k>36</li>
    <li class=k>37</li>
    <li class=k>38</li>
    <li class=k>39</li>
    <li class=k>40</li>
          </div></td>
        </tr>
            <tr>
          <td><div class=up onclick=show("a4")>+41-50</div><div onmouseover=high() onmouseout=low()  id=a4 style="display:none">
    <li class=k>41</li>
    <li class=k>42</li>
    <li class=k>43</li>
    <li class=k>44</li>
    <li class=k>45</li>
    <li class=k>46</li>
    <li class=k>47</li>
    <li class=k>48</li>
    <li class=k>49</li>
    <li class=k>50</li>
          </div></td>
        </tr>
                <tr>
          <td><div class=up onclick=show("a5")>+51-60</div><div onmouseover=high() onmouseout=low()  id=a5 style="display:none">
    <li class=k>51</li>
    <li class=k>52</li>
    <li class=k>53</li>
    <li class=k>54</li>
    <li class=k>55</li>
    <li class=k>56</li>
    <li class=k>57</li>
    <li class=k>58</li>
    <li class=k>59</li>
    <li class=k>60</li>
          </div></td>
        </tr>
            <tr>
          <td><div class=up onclick=show("a6")>+61-70</div><div onmouseover=high() onmouseout=low()   id=a6 style="display:none">
    <li class=k>61</li>
    <li class=k>62</li>
    <li class=k>63</li>
    <li class=k>64</li>
    <li class=k>65</li>
    <li class=k>66</li>
    <li class=k>67</li>
    <li class=k>68</li>
    <li class=k>69</li>
    <li class=k>70</li>
          </div></td>
        </tr>
            <tr>
          <td><div class=up onclick=show("a8")>+71-80</div><div onmouseover=high() onmouseout=low()  id=a8 style="display:none">
    <li class=k>71</li>
    <li class=k>72</li>
    <li class=k>73</li>
    <li class=k>74</li>
    <li class=k>75</li>
    <li class=k>76</li>
    <li class=k>77</li>
    <li class=k>78</li>
    <li class=k>79</li>
    <li class=k>80</li>
          </div></td>
        </tr>
      </table>
      <a href="/web/ppt"target="_blank">
      <div id="Layer1" style=" left:20px; top:247px; width:312px; height:211px; border:1px solid #000000; z-index:1;">22</div>
    </a></div><br><br>
    <div align="center">
    获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
    </div>
    </body>
    </html>
      

  2.   

    那么更简单了
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE>点击菜单</TITLE>
     </HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //菜单开关
    function switchMenu(n){
    if (document.getElementById("menucon"+n).style.display=="none"){
    document.getElementById("menucon"+n).style.display="";
    }else{
    document.getElementById("menucon"+n).style.display="none";
    }
    }
    //-->
    </SCRIPT>
    <style>
        body    {
            font-size:12px;
            line-height:30px;
        }
        .menubox    {
            width:200px;
            background-color:#EAEAEA;
            cursor:normal;
        }
        .menutitle    {
            width:200px;
            height:30px;
            background-color:#999999;
            color:#FFFFFF;
            cursor:pointer;
            text-align:center;
            border-top:#FFFFFF 1px solid;
        }
        .menucontent    {
            width:200px;
            height:120px;
            background-color:#CCCCCC;
            cursor:normal;
            padding:10px;
        }
    </style>
     <BODY>
      <div class="menubox">
            <div class="menutitle" id="menu1" onclick="switchMenu(1)">菜单标题</div>
            <div class="menucontent" id="menucon1" style="display:block;">菜单内容</div>
            <div class="menutitle" id="menu2" onclick="switchMenu(2)">菜单标题</div>
            <div class="menucontent" id="menucon2" style="display:none;">菜单内容</div>
            <div class="menutitle" id="menu3" onclick="switchMenu(3)">菜单标题</div>
            <div class="menucontent" id="menucon3" style="display:none;">菜单内容</div>
        </div>
     </BODY>
    </HTML>
      

  3.   

    切换不同的样式就行了
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE>点击菜单</TITLE>
     </HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //菜单开关
    function switchMenu(n){
        if (document.getElementById("menucon"+n).style.display=="none"){
                document.getElementById("menu"+n).className="menutitle_on";
                document.getElementById("menucon"+n).style.display="";
        }else{
                document.getElementById("menu"+n).className="menutitle_off";
                document.getElementById("menucon"+n).style.display="none";
        }
    }
    //-->
    </SCRIPT>
    <style>
        body    {
            font-size:12px;
            line-height:30px;
        }
        .menubox    {
            width:200px;
            background-color:#EAEAEA;
            cursor:normal;
        }
        .menutitle_on    {
            width:200px;
            height:30px;
            background-color:#999999;
            color:#FFFFFF;
            cursor:pointer;
            text-align:center;
            border-top:#FFFFFF 1px solid;
        }
        .menutitle_off    {
            width:200px;
            height:30px;
            background-color:#cccccc;
            color:#000000;
            cursor:pointer;
            text-align:center;
            border-top:#FFFFFF 1px solid;
        }
        .menucontent    {
            width:200px;
            height:120px;
            background-color:#EAEAEA;
            cursor:normal;
            padding:10px;
        }
    </style>
     <BODY>
      <div class="menubox">
            <div class="menutitle_on" id="menu1" onclick="switchMenu(1)">菜单标题</div>
            <div class="menucontent" id="menucon1" style="display:block;">菜单内容</div>
            <div class="menutitle_off" id="menu2" onclick="switchMenu(2)">菜单标题</div>
            <div class="menucontent" id="menucon2" style="display:none;">菜单内容</div>
            <div class="menutitle_off" id="menu3" onclick="switchMenu(3)">菜单标题</div>
            <div class="menucontent" id="menucon3" style="display:none;">菜单内容</div>
        </div>
     </BODY>
    </HTML>