So implementieren Sie ein einfaches Falt- und Erweiterungsmenü in js-js-Tutorial-php.cn

So implementieren Sie ein einfaches Falt- und Erweiterungsmenü in js

PHPz

Freigeben： 2018-09-29 09:29:41

nach vorne

2576 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode zum Implementieren einfacher Falt- und Entfaltungsmenüs in js vor und umfasst die damit verbundenen Techniken der dynamischen Javascript-Operation zur Seitenelementtransformation. Er hat einen gewissen Referenzwert wie folgt:

Was wir hier vorstellen, ist eine Menü-Navigationsleiste, die in einer sehr alten Zeit geschrieben wurde. Wenn Sie sie verwenden möchten, können Sie sie verschönern es selbst.

Ein Screenshot des Laufeffekts lautet wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http: //demo.jb51.net/ js/2015/js-simple-hidden-show-menu-codes/

Der spezifische Code lautet wie folgt:

<html>
<script> 
function show(c_Str)
{if(document.all(c_Str).style.display==&#39;none&#39;)
{document.all(c_Str).style.display=&#39;block&#39;;}
else{document.all(c_Str).style.display=&#39;none&#39;;}}
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>导航栏</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">
<p align="left">
 <table border="0" width="48" cellspacing="0" cellpadding="0">
 <tr>
  <td><p class=up onclick=show("a0")>+01-10</p><p 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>
  </p></td>
 </tr>
 <tr>
  <td><p class=up onclick=show("a1")>+11-20</p><p 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>
  </p></td>
 </tr>
 <tr>
  <td><p class=up onclick=show("a2")>+21-30</p><p 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>
  </p></td>
 </tr>
   <tr>
  <td><p class=up onclick=show("a3")>+31-40</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a4")>+41-50</p><p 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>
  </p></td>
 </tr>
   <tr>
  <td><p class=up onclick=show("a5")>+51-60</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a7")>+61-70</p><p 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>
  </p></td>
 </tr>
  <tr>
  <td><p class=up onclick=show("a8")>+71-80</p><p 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>
  </p></td>
 </tr>
 </table>
</p>
</body>
</html>

Nach dem Login kopieren

Der Oben finden Sie den gesamten Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!