<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery實作一個簡單的tab</title>
<!--使用jquery必須導入jquery.js檔案-->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".tabcont").hide();
$("li:first").addClass("yansi");
$(".tabcont:first").show();
$("li").click(function() {
$("li").removeClass("yansi");
$(this).addClass("yansi");
$(".tabcont").hide(); //隐藏全部标簽内容
var activeTab = $(this).find("a").attr("href"); //找到所屬屬性值的tab和内容
$(activeTab).fadeIn(); //使内容顯示
})
});
</script>
<style type="text/css">
.yansi {
border-style: ridge;
background-color: blue;
;
}
ul {
list-style: none;
}
li {
float: left;
margin-left: 90px
}
.tabcont {
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#onetab" target="_blank" rel="external nofollow" >第一個tab</a>
</li>
<li>
<a href="#twotab" target="_blank" rel="external nofollow" >第二個tab</a>
</li>
<li>
<a href="#threetab" target="_blank" rel="external nofollow" >第三個tab</a>
</li>
</ul>
<br />
<div id="onetab" class="tabcont">
<h3>第一個tab</h3>
<p>第一個tab内容内容内容内容内容内容内容内容内容</p>
</div>
<div id="twotab" class="tabcont">
<h3>第二個tab</h3>
<p>第二個tab内容内容内容内容内容内容内容内容内容</p>
</div>
<div id="threetab" class="tabcont">
<h3>第三個tab</h3>
<p>第三個tab内容内容内容内容内容内容内容内容内容</p>
</div>
</body>
</html>
