실습) 탭사용 (feat. jquery)
https://codepen.io/ziziziczic/pen/LYRErrj
▶ 붉은 부분: 주의 할것
<head>
<body>
<div class="all">
<div class="tabSet">
<ul class="tabs">
<li><a href="#panel1-1" class="on">panel1</a></li>
<li><a href="#panel1-2">panel2</a></li>
<li><a href="#panel1-3">panel3</a></li>
<li><a href="#panel1-4">panel4</a></li>
</ul>
<div class="panels">
<div id="panel1-1" class="panel">
01.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
<div id="panel1-2" class="panel">
02.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
<div id="panel1-3" class="panel">
03.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
<div id="panel1-4" class="panel">
04.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
</div>
</div>
</div>
</body>
</html>
teststyle1.css
*{margin:0; padding:0; list-style:none;}
body{padding:1.5em 2em; line-height:1.4; font-family:Arial,sans-serif;}
.all{width: 610px;}
.tabSet{
padding:3px;
border:2px solid #666;
margin:0 0 20px;
border-radius:4px;
}
ul{
background:black;
border-radius:4px;
padding:12px 12px 0;
overflow:hidden;
}
ul li{
float:left;
padding:0 4px 0 0 ;
}
ul li a{
color:#333;
background:#aaa;
float:left;
padding:0.45em 1.25em;
border-radius:4px 4px 0 0;
font-weight:bold;
text-decoration:none;
box-shadow:0 0 5px #444;
}
ul li a.on{
background:white;
color:#333;
cursor:default;
}
.panel{
background:white;
padding:0.75em 15px 0.4em;
margin:0 0 0.5em;
width:570px;
}
testscript1.js
$(function(){
$('.tabSet').each(function(){
var topDiv=$(this);
var anchors=topDiv.find('ul.tabs a');
var panelDivs=topDiv.find('div.panel');
var lastAnchor;
var lastPanel;
lastAnchor=anchors.filter('.on');
lastPanel=$(lastAnchor.attr('href'));
panelDivs.hide();
lastPanel.show();
anchors.click(function(e){
event.preventDefault();
var currentAnchor=$(this);
var currentPanel=$(currentAnchor.attr('href'));
lastAnchor.removeClass('on');
currentAnchor.addClass('on');
lastPanel.hide();
currentPanel.show();
lastAnchor=currentAnchor;
lastPanel=currentPanel;
});
});
});
완성
