單純只使用CSS3來做tab選單，利用input radio只可單選的特性來展示tab select的效果，再利用CSS3設定顯示的div區域，如此就可以達到Tab標籤選單的功能了。
原始碼如下：
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>CSS3標籤選單</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5842101-4', 'auto');
ga('send', 'pageview');
</script>
<style type="text/css">
#main {
font-family: sans-serif;
}
/* contents */
#contents {
color: #333;
counter-reset: num;
padding: 20px 0;
text-align: center;
}
/* navi default style */
input[name="tab"] {
-webkit-appearance: none;/*reset input radio*/
-moz-appearance: none;
appearance: none;
border: 1px solid #39f;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 0.8em;
padding: 2px 4px;
text-align: center;
width: 30%;
}
input[name="tab"]:checked {
background: #39f;
color: #fff;
}
/* insert text */
input[name="tab"]::after {
content: attr(title);
}
/* checked style */
input[name="tab"][value="0"]:checked ~ #main1,
input[name="tab"][value="1"]:checked ~ #main2,
input[name="tab"][value="2"]:checked ~ #main3 {
display: block;
}
/* contents area */
.main {
border-top: 1px solid #eee;
display: none;margin: 20px 0 0;
text-align: left;
width:100%;
height:100%;
scroll:auto;
}
</style>
</head>
<body>
<div id="main">
<div id="contents">
<input type="radio" name="tab" value="0" title="選單1" checked>
<input type="radio" name="tab" value="1" title="選單2">
<input type="radio" name="tab" value="2" title="選單3">
<div id="main1" class="main">
<br/>
<a data-flickr-embed="true" target="_blank" href="https://www.flickr.com/photos/8265075@N02/22881822182/in/shares-38E6Pn/" title="IMG_3579"><img src="https://farm6.staticflickr.com/5703/22881822182_0255075254_z.jpg" width="640" height="427" alt="IMG_3579"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
</div>
<div id="main2" class="main">
<br/>
<a data-flickr-embed="true" target="_blank" href="https://www.flickr.com/photos/8265075@N02/22428557369" title="IMG_3393"><img src="https://farm1.staticflickr.com/695/22428557369_e9b255dcd5_z.jpg" width="640" height="427" alt="IMG_3393"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
</div>
<div id="main3" class="main">
<br/>
<a data-flickr-embed="true" href="https://www.flickr.com/photos/8265075@N02/21949493092/in/datetaken/" title="IMG_2967"><img src="https://farm6.staticflickr.com/5683/21949493092_130c3307e9_z.jpg" width="640" height="427" alt="IMG_2967"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
</div>
</div></div>
</body>
</html>