<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.tab-list li{
display: inline-block;
}
.tab-list li a{
display: block;
padding: 3px 10px;
}
.tab-panel{
display: none;
}
.tab-panel.active{
display: block;
}
</style>
</head>
<body>
<section class="page">
<div class="tabs">
<ul class="tab-list">
<li class="active">
<a href="#tab-1" class="tab-control">
<h3>第一籤</h3>
</a>
</li>
<li>
<a href="#tab-2" class="tab-control">
<h3>第二籤</h3>
</a>
</li>
<li>
<a href="#tab-3" class="tab-control">
<h3>第三籤</h3>
</a>
</li>
</ul>
<div class="tab-panel active" id="tab-1">
<p>第一籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni porro provident aliquam modi nemo officiis, qui obcaecati autem numquam nihil.</p>
</div>
<div class="tab-panel" id="tab-2">
<p>第二籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sunt laudantium tenetur distinctio dolorum illum necessitatibus iure voluptas ipsam error.</p>
</div>
<div class="tab-panel" id="tab-3">
<p>第三籤內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores consequatur facilis beatae ex dolore et velit omnis repellat quidem sunt!</p>
</div>
</div>
</section>
<script type="text/javascript">
/*類似迴圈效果*/
$('.tab-list').each(function(){
var tab = $(this).find('li.active');
var link = tab.find('a');
var panel = $(link.attr('href'));
/*#tab-1（又是href的屬性值，又是jQ的id選取方法）*/
$(this).on('click','.tab-control',function(e){
e.preventDefault();
var link2=$(this);
var id = this.hash;/*#tab-1、#tab-2...*/
/*id一定存在，所以是true*/
/*不是正在顯示的，被按下去的a，沒有active這個class，所以!false就是true*/
if(id && !link2.is('.active')){
panel.removeClass('active');/*div#tab-1拿掉*/
tab.removeClass('active');/*li拿掉*/
panel=$(id).addClass('active');/*被按下去的那一個div#tab-?*/
tab=link2.parent().addClass('active');/*被按下去的那一個a的爸爸li*/
}
})
});
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
