js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法
更新時(shí)間：2015年08月28日 15:05:41 作者：企鵝
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法。分享給大家供大家參考。具體如下：
這里介紹的是意亂會(huì)折疊、展開的菜單導(dǎo)航欄，很老時(shí)候?qū)懙模珻SS沒有做美化，如果想用的朋友就自己美化吧。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/
具體代碼如下：
<html>
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>導(dǎo)航欄</title>
<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 topmargin="0" leftmargin="5">
<div align="left">
<table border="0" width="48" 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("a7")>+61-70</div><div onmouseover=high() onmouseout=low() id=a7 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>
</div>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript 下拉菜單實(shí)現(xiàn)代碼
- 通用的二級(jí)菜單代碼(css+javascript)
- 一個(gè)簡(jiǎn)單的js樹形菜單
- 三級(jí)下拉菜單的js實(shí)現(xiàn)代碼
- 一個(gè)日期下拉菜單的js實(shí)現(xiàn)代碼
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類，簡(jiǎn)單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單！
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- Js點(diǎn)擊彈出下拉菜單效果實(shí)例
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- JavaScript實(shí)現(xiàn)伸縮二級(jí)菜單
相關(guān)文章
這篇文章主要介紹了javascript關(guān)于繼承的用法,實(shí)例匯總了常見的javascript關(guān)于繼承的用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章給大家介紹javascript多并發(fā)問題處理方法，涉及到j(luò)s多并發(fā)處理方法相關(guān)知識(shí)，對(duì)js多并發(fā)處理方法感興趣的朋友可以參考下本文2015-10-10
(function(){})()的用法與優(yōu)點(diǎn)
(function(){})()的用法與優(yōu)點(diǎn)...2007-03-03
JavaScript 注冊(cè)表訪問實(shí)現(xiàn)代碼
下面的代碼是讀取media palyer的默認(rèn)路徑。運(yùn)行后確認(rèn)即可，本程序沒有安全問題，大家放心測(cè)試。2009-07-07
ES6學(xué)習(xí)筆記之Set和Map數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要介紹了ES6學(xué)習(xí)筆記之Set和Map數(shù)據(jù)結(jié)構(gòu),結(jié)合實(shí)例形式詳細(xì)分析了ECMAScript中基本數(shù)據(jù)結(jié)構(gòu)Set和Map的常用屬性與方法的功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
目前一直在學(xué)習(xí)WEB前端的知識(shí)。下面貼出最近完成的一個(gè)可排序表格.2010-12-12
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)日歷效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
JavaScript函數(shù)式編程實(shí)現(xiàn)介紹
函數(shù)式編程是一種編程范式,將整個(gè)程序都由函數(shù)調(diào)用以及函數(shù)組合構(gòu)成。 可以看成一條流水線,數(shù)據(jù)可以不斷地從一個(gè)函數(shù)的輸出流入另一個(gè)函數(shù)的輸入,最后輸出結(jié)果2022-09-09
JS簡(jiǎn)單獲取及顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了JS簡(jiǎn)單獲取及顯示當(dāng)前時(shí)間的方法,涉及javascript針對(duì)日期與時(shí)間的獲取與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
JavaScript中合并Object的三種基本方法小結(jié)
在開發(fā)過程中,我們經(jīng)常會(huì)遇到合并對(duì)象的需求,今天我們就來了解一下合并對(duì)象的幾種基本方法,文中通過代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來看看吧2023-08-08