[Template] 그룹 탭

Front-End/HTML5 + CSS

[Template] 그룹 탭

리딩리드 2017. 1. 16. 15:30

그룹 탭

- 탭을 클릭하면 하단의 내용이 변경 된다

1. 방법

1) HTML

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link href="GroupTab.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="GroupTab.js"></script> </head> <div class="tab_container"> <ul class="tab_title"> <li><a href="#tab1" class="selected">Little</a></li> <li><a href="#tab2">Beauty</a></li> </ul> <ul class="tab_panel"> <li id="tab1"> <div class="tab_image"> <img src="url.jpg"/> </div> <h2>Little</h2> <p>There is a special gift</p> </li> <li id="tab2"> <div class="tab_image"> <img src="A-Beautiful-Path-Villaviciosa-Asturias-Spain-700x525.jpg"/> </div> <h2>Beauty</h2> <p>There is a second present</p> </li> </ul> </div>

2) CSS

/*기본설정*/ body, ul{ margin:0; padding:0; } li{list-style : none;} a{ color : #666; text-decoration: none; } /*탭*/ /*탭 타이틀*/ .tab_title li{ float : left; position: relative; margin-right:3px; margin-top:4px; background:#e87352; } .tab_title li a{ display: block; padding: 0 22px; height:50px; line-height:48px; font-size : 20px; font-style: italic; color : #f8f3f0; text-align: center; } .tab_title li a.selected{ background-color:#67b0d1; } /*탭 내용*/ .tab_panel{ clear:both; border:4px solid #ddd; } .tab-panel li{ padding:20px; } .tab_image img{ width:26%; padding:20px; }

3) js

$(function(){ $(".tab_panel li:not("+$(".tab_title li a.selected").attr("href")+")").hide(); $('.tab_title li a').click(function(){ $('.tab_title li a').removeClass('selected'); $(this).addClass('selected'); $('.tab_panel li').hide(); $($(this).attr('href')).show(); return false; }); });

- $(".tab_panel li:not("+$(".tab_title li a.selected").attr("href")+")").hide();

- 처음에 선택된 하단그룹만 나올 수 있도록 셋팅한다