인터넷에서 jquery 효과를 많이 찾아봤는데 다 이런식이라 제가 직접 작성해봤습니다. 페이지 새로 고침으로 인한 탭 전환을 방지하려면 html 코드: 코드 복사 코드는 다음과 같습니다. link href=" ../Style/admin.css" rel="stylesheet" type="text/css" /> .tabs{ list-style:none; width:400px; height:23px;} <BR>.tabs a {display:block; float:left;padding:2px 3px; background:#eff7ff ; 텍스트 장식:없음; 여백-오른쪽:2px;} <BR>.tabs a.current{ 배경:#a1c6de; 색상:#000;} <BR>.tab{ 디스플레이:폭:400px; 300px; 단색 1픽셀 #ccc;} <BR></head> <br><div class="tabs"> ;a href= "#xiangmu" >프로젝트 정보</a> <a href="#kehu">고객</a><a href="#wenda">작업 질문</a> 🎜 ></div> <br><div id="xiangmu" class="tab">프로젝트 정보</div> <br><div id="kehu" class="tab"> </div> <br><div id="wenda" class="tab">작업 질문</div> <br></html> > <br>js 코드: <br><br><br><br><br>코드 복사 <br><br> </div> 코드는 다음과 같습니다. <br><br> <div class="codetitle">$( function ( ) { <span>$("div.tab").hide(); //모두 숨기기 <a style="CURSOR: pointer" data="63013" class="copybut" id="copybut63013" onclick="doCopy('code63013')">$("div.tabs a:first").addClass("current") //첫 번째 element Select <u>$("div.tab:first").show(); //첫번째 내용이 표시됩니다</u>$("div.tabs a").click(function () { </a>$ ( "div.tabs a").removeClass("current"); //모든 탭에서 현재 스타일 제거</span>$(".tab").hide() //모두 숨기기 </div>$(this ) .addClass("current"); <div class="codebody" id="code63013">var activeTab = $(this).attr("href"); //div 가져오기 <br>$(activeTab).show()) <br>//<br>var url = window.location.href; <br>var reg = /#. <br>if (reg.test(url)) {//포함, 기본값은 # 하나만, 여러 개는 고려하지 않음 <br>//모두 숨기기 <br>$("div.tabs a").removeClass("current") //모든 탭에서 현재 스타일 제거<br>$ (".tab").hide(); //모두 숨기기 <br>var href = url.split('#')[1] <br>$("div.tabs [href=#" href "] ").addClass("current"); <br>$("#" href).show(); <br>} <br>}); <br><br> <br>코드는 매우 간단합니다. 아이디어도 매우 명확하지만 매우 실용적입니다. <br>예를 들어 위의 예에서 페이지를 새로 고치고 두 번째 탭으로 이동하려면 xxx.aspx#kehu만 다시 지정하면 됩니다. <br>스크린샷 첨부<br><br> </div>
