レッスン後の練習:非常に簡単なタブ
2845 ワード
<style type="text/css">
body,ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
width: 600px;
margin: 20px auto;
}
.tab .nav {
display: table;
/*webkit*/
width: 100%;
height: 40px;
word-spacing: -1em;
border: 1px solid #a0b3d6;
border-bottom: 0;
}
.tab .nav li {
line-height: 40px;
display: inline-block;
zoom: 1;
*display: inline;
}
.tab .nav a {
font-size: 14px;
display: block;
zoom: 1;
padding: 0 30px;
color: #34538b;
border-right: 1px solid #a0b3d6;
background-color: #eaf0fd;
*display: inline;
}
.tab li.seleted a {
margin-bottom: -1px;
border-bottom: 1px solid #fff;
background: #fff;
*position: relative;
*border: 0;
*margin: 0;
*bottom: -1px;
}
.tab li.seleted {
*border-right: 1px solid #a0b3d6;
}
.tab .content {
width: 100%;
height: 600px;
border: 1px solid #a0b3d6;
}
</style>
<div class="tab">
<ul class="nav">
<li class="seleted"><a href="javascript:;"> </a></li>
<li><a href="javascript:;"> </a></li>
<li><a href="javascript:;"> </a></li>
<li><a href="javascript:;"> </a></li>
</ul>
<div class="content">
</div>
</div>
<script type="text/javascript">
window.onload = function() {
var oTab = document.getElementsByClassName('nav')[0];
var oContent=document.getElementsByClassName('content')[0];
var aLi = oTab.getElementsByTagName('li');
var aA = oTab.getElementsByTagName('a');
var aContent = [' ', ' ', ' ', ' '];
var caLi=aLi[0];
oContent.innerHTML=aContent[0];
for (var i = 0; i < aA.length; i++) {
aA[i].onclick =(function(i){
return function(){
caLi.className='';
aLi[i].className='seleted';
caLi=aLi[i];
oContent.innerHTML=aContent[i];
}
})(i);
}
};
</script>
</code></pre> </li>
</ul>
</article>
</div>
</div>