js에서 간단한 접기 및 확장 메뉴를 구현하는 방법
이 글은 주로 js에서 간단한 접기 및 펼치기 메뉴를 구현하는 방법을 소개하며, 페이지 요소 변환의 자바스크립트 동적 조작 관련 기술을 포함합니다. 자세한 내용은 참조할 수 있습니다.
여기서 소개하는 것은 접고 펼칠 수 있는 메뉴 네비게이션 바입니다. CSS가 미화되지 않은 상태에서 사용하실 수 있습니다. 스스로요.
실행 중인 효과의 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
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>导航栏</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>위의 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7612
15
1387
52
88
11
68
19
29
136
구글 픽셀 9 프로 폴드 휴대폰 케이스 노출 : 6.4인치 외부 스크린, 8.02인치 내부 스크린
Jun 25, 2024 pm 02:35 PM
25일 뉴스에 따르면, 출처 ytechb는 어제(24일) 블로그 게시물을 게재해 구글 픽셀9 프로 폴드 휴대폰 케이스 렌더링을 공유하며, 이 병풍의 뒷면 디자인을 다시 한 번 보여줬다. 이전 소식에 따르면, 구글은 올해 10월 픽셀 9 시리즈 휴대폰을 출시할 예정이며, 픽셀 9 시리즈 휴대폰 3종 외에 픽셀 폴드도 픽셀 9 시리즈에 포함돼 공식 명칭은 픽셀 9이 될 예정이다. 프로 폴드. 이번에 노출된 휴대폰 케이스는 액세서리 제조사 토로(Torro)의 영국, 미국 온라인 매장에 제품 휴대폰 케이스를 게재하고 휴대폰의 디자인과 디스플레이 사이즈를 공개한 바 있다. 이 페이지에는 다수의 Pixel 9 Pro Fold 휴대전화 케이스 렌더링이 표시됩니다.
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
삼성 1만위안 폴더블폰 W25 공개 : 500만 화소 전면 언더스크린 카메라, 더 얇아진 본체
Aug 23, 2024 pm 12:43 PM
8월 23일 뉴스에 따르면, 삼성전자는 9월 말 공개될 예정인 새로운 폴더블폰 W25를 출시할 예정이다. 이에 맞춰 언더스크린 전면 카메라와 본체 두께도 개선될 예정이다. 보도에 따르면, 코드명 Q6A인 삼성 W25에는 갤럭시 Z 폴드 시리즈의 400만 화소 카메라보다 향상된 500만 화소 언더 스크린 카메라가 장착될 예정입니다. 또한 W25의 외부 화면 전면 카메라와 초광각 카메라는 각각 1,000만 화소와 1,200만 화소가 될 것으로 예상된다. 디자인적으로 보면 W25는 접힌 상태에서 두께가 약 10mm로 표준형 갤럭시Z폴드6보다 약 2mm 얇아졌다. 화면 측면에서는 W25가 6.5인치 외부 화면과 8인치 내부 화면을 갖고 있는 반면, 갤럭시Z폴드6는 6.3인치 외부 화면과 8인치 내부 화면을 갖고 있다.
PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법
Dec 17, 2023 am 08:08 AM
PHP와 JS를 사용하여 주식 캔들 차트를 만드는 방법 주식 캔들 차트는 주식 시장에서 흔히 사용되는 기술 분석 그래픽으로 시가, 종가, 최고가 등의 데이터를 그려서 투자자가 주식을 보다 직관적으로 이해할 수 있도록 도와줍니다. 주식의 최저 가격. 이 기사에서는 특정 코드 예제와 함께 PHP 및 JS를 사용하여 주식 캔들 차트를 만드는 방법을 설명합니다. 1. 준비 시작하기 전에 다음 환경을 준비해야 합니다. 1. PHP를 실행하는 서버 2. HTML5 및 Canvas를 지원하는 브라우저 3
주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.
Dec 17, 2023 pm 06:55 PM
주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요
삼성 갤럭시 Z 플립 6 모델 최초 공개: 베젤이 더 좁아지고 주름이 여전히 존재함
Jun 22, 2024 am 03:28 AM
21일 뉴스에 따르면 최근 외신들은 삼성 갤럭시Z플립6의 모델 사진을 인터넷에 공개했다. 사진에 따르면 삼성 갤럭시 Z 플립 6의 테두리가 더욱 좁아져 접힌 상태에서 휴대폰의 너비가 줄어들 수 있음을 의미하며, 더욱 편안한 그립감과 휴대성을 제공한다는 것을 알 수 있습니다. . 더욱이 갤럭시 ZFlip6 모델은 이전 세대 ZFlip5에 비해 좀 더 사각형이 되었고, 후면 카메라 모듈도 새로운 카메라 센서를 채용할 것으로 예상됩니다. 다만, 전면에서 보면 여전히 휴대폰의 주름이 비교적 뚜렷하지만, 유출된 모델이 모델폰이라는 점을 고려하면 실제 휴대폰과 다소 차이가 있을 수 있으므로 참고용으로만 사용하시기 바랍니다. 성능 구성으로 보면 갤럭시는
접이식 스크린 휴대폰의 가장 큰 단점: 핵심 응용 시나리오가 없음
Mar 16, 2024 am 09:04 AM
오늘 우리가 논의하는 것은 특정 제품이 어떤 것인지가 아니라, '접이식 화면' 자체의 주제로 돌아가서 접는식 화면 휴대폰의 '합리성'에 대해 탐구하는 것입니다. 먼저, 폴더블폰 시장실적을 살펴보자. IDC 최신 자료에 따르면, 2023년 중국 폴더블폰 시장은 전년 대비 114.5% 증가한 약 700만7000대를 출하할 것으로 예상된다. 그중 중국 폴더블 스크린 휴대폰 시장은 2023년 4분기 약 277만1000대를 출하해 전년 동기 대비 149.6% 증가한 것으로 나타났다. 데이터도 좋아 보이고 성장세도 매우 강하다. 하지만 2023년 중국 시장의 스마트폰 출하량 약 2억 7천만 대에 비하면 이 데이터는 정말 부족하다. 일반적으로
IDC는 2024년 전 세계 스마트폰 출하량이 12억 대에 달할 것으로 추산했다. 폴더블 화면은 2,500만 대로 전년 대비 37% 증가한 수치다.
Feb 24, 2024 pm 02:20 PM
24일 뉴스에 따르면 IDC는 최근 시장조사 보고서를 발표해 2024년 전 세계 스마트폰 출하량이 전년 동기 대비 2.8% 증가한 12억대에 달한 뒤 2028년까지 낮은 한 자릿수 성장률을 유지할 것으로 전망했다. . IDC는 2024년 전체 출하량은 여전히 팬데믹 이전 수준을 밑돌 것으로 보고 있지만 글로벌 스마트폰 시장은 바닥을 치고 회복세를 보이기 시작했다. IDC는 전반적인 시장 회복을 이끄는 두 가지 주요 요인은 장비 갱신 주기와 신흥 시장의 수요 증가라고 믿습니다. IDC는 2024년 폴더블폰 출하량이 전년 대비 37% 증가한 2,500만 대에 이를 것으로 추정하고 있다. 스마트폰 토론이 촉발되다
