JQuery 탭 효과(JS와 HTML 분리)
- 高洛峰원래의
- 2017-02-04 14:33:101176검색
실제 애플리케이션에서는 탭 모듈 구조 코드의 무결성이 보장되는 한 동일한 유형의 N개 탭을 임의로 추가할 수 있으며 HTML에서 이벤트 핸들러를 수동으로 바인딩하고 숨길 콘텐츠 레이어를 추가할 필요가 없습니다. . ID.
Javascript(jquery) 코드는 다음과 같습니다.
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul.menu li:first-child").addClass("current");
$("div.content").find("div.layout:not(:first-child)").hide();
$("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)});
$("ul.menu li").click(function(){
var c = $("ul.menu li");
var index = c.index(this);
var p = idNumber("No");
show(c,index,p);
});
function show(controlMenu,num,prefix){
var content= prefix + num;
$('#'+content).siblings().hide();
$('#'+content).show();
controlMenu.eq(num).addClass("current").siblings().removeClass("current");
};
function idNumber(prefix){
var idNum = prefix;
return idNum;
};
});
</script>CSS 스타일 코드는 다음과 같습니다.
<style type="text/css">
* {margin:0; padding:0}
ul,li { list-style:none}
.box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}
.tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}
.tagMenu h2 {font-size:12px; padding-left:10px;}
.tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}
ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer}
ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}
.content { padding:10px}
</style>HTML 구조 코드는 다음과 같습니다.
<body> <div class="box"> <div class="tagMenu"> <h2>No.1 Menu</h2> <ul class="menu"> <li>Label 1.1</li> <li>Label 1.2</li> <li>Label 1.3</li> <li>Label 1.4</li> </ul> </div> <div class="content"> <div class="layout">infomation 1.1</div> <div class="layout">infomation 1.2</div> <div class="layout">infomation 1.3</div> <div class="layout">infomation 1.4</div> </div> </div> <div class="box"> <div class="tagMenu"> <h2>No.2 Menu</h2> <ul class="menu"> <li>Label 2.1</li> <li>Label 2.2</li> <li>Label 2.3</li> <li>Label 2.4</li> </ul> </div> <div class="content"> <div class="layout">infomation 2.1</div> <div class="layout">infomation 2.2</div> <div class="layout">infomation 2.3</div> <div class="layout">infomation 2.4</div> </div> </div> </body>
JQuery 더보기 탭 효과 (JS 및 (HTML 분리) 관련 기사는 PHP 중국어 사이트를 주목해주세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.