<div class="codetitle"> <span><a style="CURSOR: pointer" data="36625" class="copybut" id="copybut36625" onclick="doCopy('code36625')"><u>复制代码</u></a></span>代码如下:</div> <div class="codebody" id="code36625"> <br><html> <br> <br></title> <br><script src="js/jquery.min.js" type="text/javascript"></script> <br><script language="javascript" type="text/javascript"> <br>$(document).ready(function(){ <br>$("ul.menu li:first-child").addClass("current"); <br>$("div.content"). find("div.layout:not(:first-child)").hide(); <br>$("div.content div.layout").attr("id", function(){return idNumber("いいえ") $("div.content div.layout").index(this)}); <br>$("ul.menu li").click(function(){ <br>var c = $(" ul.menu li"); <br>varindex = c.index(this); <br>var p = idNumber("No"); <br>show(c,index,p); <br>}) ; <br><br>関数 show(controlMenu,num,prefix){ <br>var content= prefix num; <br>$('#' content).siblings().hide(); '#' コンテンツ).show(); <br>controlMenu.eq(num).addClass("current").siblings().removeClass("current"); <br><br>関数idNumber(prefix){ <br>var idNum = prefix; <br>}; <br></script> <br><style type="text/css"> <br>* {マージン:0;パディング:0} <br>ul,li { <br>list-style:none <br>} <br>.box { <br>border:1px Solid #ccc; <br>マージン:10px; <br>} <br>.tagMenu { <br>高さ: 24px; <br>位置:相対; <br>border-bottom:1px Solid #999 <br>} <br>.tagMenu ul { <br>position:absolute; <br>下:-1px; <br>高さ:26px; <br>} <br>ul.menu li { <br>float:left; <br>border-left:1px ソリッド #999; <br>パディング:0 12px; <br>cursor:pointer <br>} <br>ul.menu li.current { <br>border:1px Solid #999; <br>ボーダーボトム:なし; <br>背景:#fff; <br>高さ:25px; <br>行の高さ:26px; <br>margin:0 <br>} <br>.content {padding:10px} <br></style> <br> <br><div class="box"> <br><div class="tagMenu"> <br><ul class="メニュー"> <br><li>ラベル 1.1</li> <br><li>ラベル 1.2</li> <br><li>ラベル 1.3</li> <br><li>ラベル 1.4</li> <br> <br> </div> <br><div class="コンテンツ"> <br><div class="layout">情報 1.1</div> <br><div class="layout">情報 1.2</div> <br><div class="layout">情報 1.3</div> <br><div class="layout">情報 1.4</div> <br> <br> <br></body> <br></html> <br><br> <br><br><br>