> 웹 프론트엔드 > JS 튜토리얼 > jquery 탭 플러그인 단순화된 버전 Sharing_jquery

jquery 탭 플러그인 단순화된 버전 Sharing_jquery

WBOY
풀어 주다: 2016-05-16 18:02:31
원래의
961명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

/*
* jqpressToos1.0
*
* Copyright (c) 2011 yepeng
* MIT(MIT-LICENSE.txt)
* 및 GPL(GPL-LICENSE.txt) 라이센스
*
*에 따라 이중 라이센스가 부여되었습니다. /

$.fn.extend({
//플러그인 이름: Tab
jqpressTab: function(options) {
//매개변수 및 기본값
var defaults = {
_tabClass: null,//tab style
_childs:null //하위 옵션 스타일 선택기
}
var options = $.extend(defaults, options)
var o = 옵션 ;

var parentCate = $(this);
var childCate = $(o._childs)

parentCate.mouseover(function() {
parentCate.removeClass( o ._tabClass);

$(this).addClass(o._tabClass)
for (i = 0; i < parentCate.length; i ) {
if (parentCate[i ] .className == o._tabClass) {
childCate[i].style.display = "차단"
} else {
childCate[i].style.display = "없음"; > }
}

});
}
})

})(jQuery)

더 간단하게:

코드 복사 코드는 다음과 같습니다.
jQuery(document).ready( function(){ $ (".mytab li a").jqpressTab({ _tabClass: "스타일 이름", _childs: "하위 요소 스타일 이름" });})

필요한 경우 ID를 기반으로 나만의 선택기를 만들려면 확장해 보세요. 하하
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿