<div class="codetitle"> <span><a style="CURSOR: pointer" data="57096" class="copybut" id="copybut57096" onclick="doCopy('code57096')"><u>复代码码</u></a></span> 代码如下:</div> <div class="codebody" id="code57096"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>滑动门切换，jQuery层切换代码</title> <br><script type="text/javascript" src="http://www.jb51.net/ajaxjs/jquery-1.6.2.min.js"></script> <br><script type="text/javascript"> <br>$(function(){ <br>$("ul li").each(function(i){ <br>$(this).hover(function(){ <br>$(this).addClass ("bg").siblings().removeClass("bg"); <br>$(".div:eq(" i ")").show().siblings(".div").hide() ; <br>}) <br>}) <br>}) <br></script> <br><style type="text/css"> <br>*{ 여백:0; 패딩:0; 글꼴 크기:12px;} <br>ul li{ 목록 스타일: 없음; 부동:왼쪽; 배경색:#999; 커서:포인터; 너비:100px; 높이:25px; 줄 높이:25px; 텍스트 정렬:센터;} <br>ul li.bg{ 배경색:#9F0;} <br>.clr{ 클리어:모두;} <br>.div{너비:200px; 높이:60px; 배경:#666; 줄 높이:60px; 텍스트 정렬:센터;} <br>.none{ 디스플레이:없음} <br></style> <br></head> <br><본문> <br><ul><li class="bg">账户信息</li><li>邮寄地址</li></ul> <br><div class="clr"></div> <br><div class="div"> <br>第一个div内容 <br></div> <br><div class="div none"> <br>第二个div内容 <br></div> <br></body> <br></html> <br> </div>
