Simple Slider

From. Javascript Cookbook.

jQuery를 사용하지 않고 tab을 구현하는 것을 보여줍니다. querySelector, querySelectorAll을 사용하고 있기 때문에 ie7에서는 작동하지 않습니다. ie7일 경우, querySelector, querySelectorAll을 보완해 주는 스크립트를 넣을 경우 작동하는 걸로 보입니다. "querySelector ie7"로 구글 검색하면 ie7을 위한 방법을 알려줍니다. http://www.codecouch.com/2012/05/adding-document-queryselectorall-support-to-ie-7/

  • Page One
  • Page Two
  • Page Three

page 1

page 2

page 3

  • Page Two One
  • Page Two Two

page 4

page 5

							window.onload = function () {
								
								// 모든 컨테이너에 대해 반복
								var containers = document.querySelectorAll(".tabcontainer");
								for (var j = 0; j < containers.length; j++) {

									// 요소 보이기와 감추기
									var nav = containers[j].querySelector(".tabnavigation ul");
									nav.style.display = "block";

									// 현재 탭 설정
									var navitem = containers[j].querySelector(".tabnavigation ul li");
									var ident = navitem.id.split("_")[1];
									navitem.parentNode.setAttribute("data-current", ident);
									navitem.setAttribute("style", "background-color:#f00");

									var pages = containers[j].querySelectorAll(".tabpage");
									for (var i = 1; i < pages.length; i++) { // 중요 var i = 1 에서 부터 시작 0은 제외된다. 첫번째 
										pages[i].style.display = "none";
									}

									var tabs = containers[j].querySelectorAll(".tabnavigation ul li");
									for (var i = 0; i < tabs.length; i++) {
										tabs[i].onclick = displayPage;
									}
								}	// for j end
							}	// onload end

							// 탭 클릭
							function displayPage() {
								var current = this.parentNode.getAttribute("data-current");
								document.getElementById("tabnav_" + current).setAttribute("style", "background-color:#fff");
								document.getElementById("tabpage_"+ current).style.display = "none";

								var ident = this.id.split("_")[1];
								this.setAttribute("style", "background-color:#f00");
								document.getElementById("tabpage_"+ident).style.display = "block";
								this.parentNode.setAttribute("data-current", ident);
							}											
						
							.tabcontainer{padding:5px;width:500px;margin:20px;}
							.tabnavigation ul{padding:0;margin:0;display:none;}
							.tabnavigation ul li{padding:3px;display:inline;border:1px solid #000;background-color:#fff;}
							.tabnavigation ul li:hover{cursor:pointer;}
							.tabpages{position:relative;z-index:2;border:1px solid #000;background-color:#fff;}
							.tabpage{margin:0 10px;}							
						
							<div class="tabcontainer">
								<div class="tabnavigation">
									<ul>
										<li id="tabnav_1">Page One</li>
										<li id="tabnav_2">Page Two</li>
										<li id="tabnav_3">Page Three</li>
									</ul>
								</div>
								<div class="tabpages">
									<div class="tabpage" id="tabpage_1">
										<p>page 1</p>				
									</div>
									<div class="tabpage" id="tabpage_2">
										<p>page 2</p>				
									</div>
									<div class="tabpage" id="tabpage_3">
										<p>page 3</p>				
									</div>
								</div>
							</div><!-- /tabcontainer -->

							<div class="tabcontainer">
								<div class="tabnavigation">
									<ul>
										<li id="tabnav_4">Page Two One</li>
										<li id="tabnav_5">Page Two Two</li>
									</ul>
								</div>
								<div class="tabpages">
									<div class="tabpage" id="tabpage_4">
										<p>page 4</p>				
									</div>
									<div class="tabpage" id="tabpage_5">
										<p>page 5</p>				
									</div>
								</div>
							</div><!-- /tabcontainer -->