<img src="http://files.jb51.net/file_images/article/201310/20131018111620.gif?2013918111637" alt="jquery_jquery를 사용하여 하위 메뉴 수를 계산하는 샘플 코드" > <br>jquery 탭特效~ （类似选项卡）<a href="http://www.jb51.net/article/42151.htm" target="_blank">http://www.jb51.net/article/42151.htm</a> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="87714" class="copybut" id="copybut87714" onclick="doCopy('code87714')"><u>复代码</u></a></span> 代码如下:</div> <div class="codebody" id="code87714"> <br><!doctype html> <br><html lang="ko"> <br><머리> <br><meta charset="UTF-8"> <br><title>탭</title> <br><style type="text/css"> <br>/* 여백 패딩 제거 */ <br>body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset ,범례,버튼,입력,텍스트 영역,th,td { 여백:0; 패딩:0; } <br><br>/* 기본 글꼴 */ <br>body,button,input,select,textarea { 글꼴:12px/1.5 5b8b4f53,arial,sans-serif; } <br>h1,h2,h3,h4,h5,h6 { 글꼴 크기:100%; } <br>address,cite,dfn,em,var { 글꼴 스타일:normal; } <br>code,kbd,pre,samp { 글꼴 계열:courier new,courier,monospace; } <br>작은 { 글꼴 크기:12px; } <br>ul,ol { 목록 스타일:없음; } <br>a { 텍스트 장식:없음; } <br>a:hover { 텍스트 장식:밑줄; } <br>sup { 수직 정렬:텍스트 상단; } <br>sub { 수직 정렬:텍스트 하단; } <br>범례 { 색상:#000; } <br>fieldset,img { 테두리:0; } <br>버튼,입력,선택,텍스트 영역{ 글꼴 크기:100%; } <br>테이블 { border-collapse:collapse; 테두리 간격:0; } <br><br>.col-main{ float:left; 너비:100%; 최소 높이:1px; } <br>.col-sub,.col-extra { float:left; } <br>.layout:after,.main-wrap:after,.col-sub:after,.col-extra:after { content:'20'; 표시:블록; 높이:0; 지우기:둘 다; } <br>.layout,.main-wrap,.col-sub,.col-extra { Zoom:1; } <br><br>/* 공통 기능 */ <br>.hidden { display:none; } <br>.invisible { 가시성:숨김; } <br><br>/* Float 제거 */ <br>.clear { display:block; 높이:0; 오버플로:숨김; 지우기:둘 다; } <br>.clearfix:after { 내용:'20'; 표시:블록; 높이:0; 지우기:둘 다; } <br>.clearfix { *zoom:1; } <br><br>/* IE가 아닌 브라우저의 경우 스크롤 막대로 인한 깜박임을 방지하기 위해 기본적으로 세로 스크롤 막대도 표시합니다. */ <br>html { Overflow-y:scroll; } <br><br>/* 기본 링크 스타일 */ <br>a:link {color: #003399; } <br>a:visited {색상: #123689;} <br>a:hover {색상: #FF6600;} <br></style> <br></head> <br><본문> <br><br><style type="text/css"> <br>.menu { 너비:200px; 테두리:1px 실선 #CCC; margin-bottom:20px } <br>.menu h3 { 높이:30px; 줄 높이:30px; 배경:#ccc; } <br>.menu .num { 글꼴 두께:bold; 색상: 빨간색; 왼쪽 패딩:30px; } <br></style> <br><br><div class="menu"> <br><h3>系统设置 <span class="num"></span></h3> <br><ul> <br><li>菜单1</li> <br><li>菜单2</li> <br><li>菜单3</li> <br><li>菜单4</li> <br><li>菜单5</li> <br><li>菜单6</li> <br></ul> <br></div> <br><br><div class="menu"> <br><h3>菜单设置2 <span class="num"></span></h3> <br><ul> <br><li>菜单1</li> <br><li>菜单2</li> <br><li>菜单3</li> <br><br></ul> <br></div> <br><br><div class="menu"> <br><h3>菜单设置3 <span class="num"></span></h3> <br><ul> <br><li>菜单1</li> <br><li>菜单2</li> <br><li>菜单3</li> <br><li>菜单4</li> <br><br><li>菜单5</li> <br></ul> <br></div> <br><br><br><script type="text/javascript" src="jquery.js"></script> <br><script type="text/javascript"> <br>for ( var i=0; ivar num = $('.menu').eq(i).children('ul') .children('li').length; <br>$('.menu').eq(i).find('.num').text(num); <br>} <br></script> <br></body> <br></html> <br> </div>
