CSS3 Tab標籤選單

單純只使用CSS3來做tab選單,利用input radio只可單選的特性來展示tab select的效果,再利用CSS3設定顯示的div區域,如此就可以達到Tab標籤選單的功能了。

CSS3Tab3 CSS3Tab1 CSS3Tab2

原始碼如下:


<!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/[email protected]/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/[email protected]/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/[email protected]/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>

demo

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料