Latest web development tutorials

재단 탭

탭 탐색은 서로 다른 콘텐츠를 표시하는 것은 매우 좋을 수 있고, 콘텐츠는 전환 할 수있다.

Tab을 사용하여 <ul class="tabs" data-tab> -tab을> <LI> 요소를 각 옵션을 생성하고 추가 .tab-title 만들 클래스를.

팁 : 현재 선택된 항목을 사용할 수 있습니다 .active 클래스를.

예

<UL 클래스 = "탭"데이터 -tab>
<리 클래스 = "탭 타이틀 활동"> <a의 HREF = "#"> 홈 </ A> </ 리>
<리 클래스 = "탭 제목 "> <a의 HREF = "#"> 메뉴 1 </ A> </ 리>
<리 클래스 = "탭 제목 "> <a의 HREF = "#"> 메뉴 2 </ A> </ 리>
<리 클래스 = "탭 제목 "> <a의 HREF = "#"> 메뉴 3 </ A> </ 리>
</ UL>

»시도

수직 탭

수직 탭을 사용하여 .vertical 카테고리 :

예

<UL 클래스 = "탭 수직" 데이터 탭>

»시도

탭 전환

당신은 설정 탭을 변경하려는 경우, 당신은 <div> 요소를 더한 사용할 수 있습니다 .content 클래스를. 게다가 고유 한 각 탭에서 ID 및 목록 항목에 연결 (<A HREF는 = "#의 MENU1은"ID = "메뉴"옵션의 콘텐츠를 엽니 다). 마지막으로, 콘텐츠에 대한 모든 옵션 <div> 요소에는 <div> 요소를 추가하는 .tabs-content 클래스를, 및 기초 JS를 초기화한다.

참고 .active 클래스가 자동으로 현재 선택된 탭에 추가된다 :

예

<UL 클래스 = "탭"데이터 -tab>
<리 클래스 = "탭 타이틀 활동"> <a의 HREF = "#home"> 홈 </ A> </ 리>
<리 클래스 = "탭 제목 = "# menu1"> 메뉴 1 </ A> </ 리>"> <a의 HREF
<리 클래스 = "탭 제목 = "# menu2"> 메뉴 2 </ A> </ 리>"> <a의 HREF
<리 클래스 = "탭 제목 = "# menu3"> 메뉴 3 </ A> </ 리>"> <a의 HREF
</ UL>
<사업부 클래스 = "탭 콘텐츠 ">
<사업부 클래스 = "콘텐츠 활성화" ID = "홈">
<H3> HOME </ H3>
심장이 여기서 <P> 홈이 있습니다 .. </ P>
</ DIV>
<사업부 클래스 = "콘텐츠"ID = "메뉴">
<H3> 메뉴 1 </ H3 >
<P> 일부 텍스트, blabla < / P>
</ DIV>
<사업부 클래스 = "콘텐츠"ID = "메뉴 2">
<H3> 메뉴 2 </ H3 >
<P> 일부 텍스트입니다. < / P>
</ DIV>
<사업부 클래스 = "콘텐츠"ID = "menu3">
<H3> 메뉴 3 </ H3 >
<P> 마지막 탭을 선택합니다. </ P>
</ DIV>
</ DIV>

<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

»시도

탭 페이드

탭이 적용 페이드 사용자 정의 CSS를 사용하여

예

.tabs 콘텐츠> .content.active {
-webkit-애니메이션 : fadeEffect 초;
애니메이션 : fadeEffect의 1 초;
}

@ -webkit-키 프레임 fadeEffect {
{불투명 : 0;}에서
{불투명 : 1;}에
}

@keyframes fadeEffect {
{불투명 : 0;}에서
{불투명 : 1;}에
}

»시도