Node.js 다중 계단식 TAB tab_javascript 기술

HTML: 기본 콘텐츠를 배치하기 위한 여러 탐색 태그와 div
스크립트: 각 탐색에 해당하는 html을 배열 형식으로 제공

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>여러 개의 TAB 탭</title> <style type="text/css"> .nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padding:2px; overflow:hidden; } .nonstop span { float:left;_display:inline; cursor:pointer; width:22px; height:14px; background:#cdcdcd url(./img/button.gif) no-repeat -175px top; font-size:10px; line-height:14px; margin:2px 0 0 2px; display:inline; text-align:center; } .nonstop span:hover { background:gray; font-weight:bold } .nonstop div { height:300px; clear:both; border:1px solid #cdcdcd; border-width:2px 1px; margin-left:2px; overflow:hidden; } .nonstop div a { float:left; width:80px; height:40px; background:white; text-align:center; line-height:40px; padding-top:8px; margin:1px 0 0 1px; } .nonstop div a img { border:0; } .nonstop span.hot { border:1px solid red; width:20px; color:white; height:15px; background:red url(./img/button.gif) no-repeat -175px -14px; font-weight:bold; border-bottom:none; } </style> <!--顶部-->적응형 너비를 갖춘 다층 TAB 탭(논스톱 너비 테스트 효과를 직접 변경) HTML: 기본 콘텐츠 div를 배치하기 위한 여러 탐색 태그와 하나 Script : 각 네비게이션에 해당하는 html을 배열 형태로 제공 <div class="nonstop" id="a2zbox"> <!--内容区--> <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span> <span>H</span><span>나</span> <span>J</span><span>M</span><span>L</span><span>N</span><span>O</span> <span>P</span><span>S</span><span>T</span><span>U</span><span>Y</span><span>Z</span><span>!</span> <div> <!--默认内容--> 여기에 기본 콘텐츠를 넣으세요. <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1 </p> </div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]