<img src="http://files.jb51.net/file_images/article/201310/20131018111620.gif?2013918111637" alt="jquery_jqueryを使用してサブメニューの数をカウントするサンプルコード" > <br>jquery tab特效~ (类似选项卡)<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="ja"> <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 { font:12px/1.5 5b8b4f53,arial,sans-serif; } <br>h1,h2,h3,h4,h5,h6 { font-size:100%; } <br>address,cite,dfn,em,var { font-style:normal; } <br>code,kbd,pre,samp { font-family:courier new,courier,monospace; } <br>small { font-size:12px; } <br>ul,ol { list-style:none; } <br>a { text-decoration:none; } <br>a:hover { text-decoration:underline; <br>sup {vertical-align:text-top; <br>sub {vertical-align:text-bottom; } <br>凡例 { color:#000; <br>フィールドセット,img { border:0; } <br>ボタン、入力、選択、テキストエリア{ font-size: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 { ズーム:1; } <br><br>/* 共通機能 */ <br>.hidden { display:none; <br>.invisible {可視性:非表示; } <br><br>/* Float を削除 */ <br>.clear { display:block;高さ:0;オーバーフロー:非表示;クリア:両方; } <br>.clearfix:after { content:'20';表示:ブロック;高さ:0;クリア:両方; } <br>.clearfix { *ズーム:1; } <br><br>/* IE 以外のブラウザでは、スクロール バーによるちらつきを防ぐために、デフォルトで垂直スクロール バーも表示されます */ <br>html { overflow-y:scroll; } <br><br>/* デフォルトのリンク スタイル */ <br>a:link {color: #003399; } <br>a:visited {color: #123689;} <br>a:hover {color: #FF6600;} <br></style> <br></head> <br> <br><br><style type="text/css"> <br>.menu {幅:200px;ボーダー:1px ソリッド #CCC; margin-bottom:20px } <br>.menu h3 { height:30px;行の高さ:30px;背景:#ccc; } <br>.menu .num { font-weight: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> <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> <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> </ul>
