Ianliu1997 (Talk | contribs) |
Ianliu1997 (Talk | contribs) |
||
Line 251: | Line 251: | ||
.tab-content ul{position: absolute; min-height: 100px; left:0; top:1px; padding:10px; background: #fff;} | .tab-content ul{position: absolute; min-height: 100px; left:0; top:1px; padding:10px; background: #fff;} | ||
#tab1:target, #tab2:target, #tab3:target{z-index: 1;} | #tab1:target, #tab2:target, #tab3:target{z-index: 1;} | ||
+ | |||
+ | /* span:target */ | ||
+ | #tab-1:target, | ||
+ | #tab-2:target, | ||
+ | #tab-3:target, | ||
+ | #tab-4:target{ | ||
+ | border: solid 1px red; | ||
+ | } | ||
+ | |||
+ | /*頁籤變換*/ | ||
+ | #tab-1:target ~ #tab > ul li a[href$="#tab-1"], | ||
+ | #tab-2:target ~ #tab > ul li a[href$="#tab-2"], | ||
+ | #tab-3:target ~ #tab > ul li a[href$="#tab-3"], | ||
+ | #tab-4:target ~ #tab > ul li a[href$="#tab-4"] { | ||
+ | border: solid 1px red; | ||
+ | } | ||
+ | |||
+ | /*頁籤內容顯示*/ | ||
+ | #tab-1:target ~ #tab > div.tab-content-1, | ||
+ | #tab-2:target ~ #tab > div.tab-content-2, | ||
+ | #tab-3:target ~ #tab > div.tab-content-3, | ||
+ | #tab-4:target ~ #tab > div.tab-content-4 { | ||
+ | border: solid 1px red; | ||
+ | } | ||
+ | |||
+ | #tab{ | ||
+ | width: 400px; | ||
+ | background: #1caa5d; | ||
+ | border: solid 1px #1caa5d; | ||
+ | } | ||
+ | /* 頁籤ul */ | ||
+ | #tab>ul{ | ||
+ | overflow: hidden; | ||
+ | margin: 0; | ||
+ | padding: 10px 20px 0 20px; | ||
+ | } | ||
+ | #tab>ul>li{ | ||
+ | list-style-type: none; | ||
+ | |||
+ | } | ||
+ | #tab>ul>li>a{ | ||
+ | text-decoration: none; | ||
+ | font-size: 13px; | ||
+ | color: #333; | ||
+ | float: left; | ||
+ | padding: 10px; | ||
+ | margin-left: 5px; | ||
+ | } | ||
+ | |||
+ | /*頁籤div內容*/ | ||
+ | #tab>div { | ||
+ | clear:both; | ||
+ | padding:0 15px; | ||
+ | height:0; | ||
+ | overflow:hidden; | ||
+ | visibility:hidden; | ||
+ | -webkit-transition:all .4s ease-in-out; | ||
+ | -moz-transition:all .4s ease-in-out; | ||
+ | -ms-transition:all .4s ease-in-out; | ||
+ | -o-transition:all .4s ease-in-out; | ||
+ | transition:all .4s ease-in-out; | ||
+ | } | ||
+ | |||
+ | /* span:target */ | ||
+ | #tab-1:target, | ||
+ | #tab-2:target, | ||
+ | #tab-3:target, | ||
+ | #tab-4:target{ | ||
+ | border: solid 1px red; | ||
+ | } | ||
+ | |||
+ | /*第一筆的底色*/ | ||
+ | span:target ~ #tab > ul li:first-child a { | ||
+ | background:#1caa5d; | ||
+ | } | ||
+ | span:target ~ #tab > div:first-of-type { | ||
+ | visibility:hidden; | ||
+ | height:0; | ||
+ | padding:0 15px; | ||
+ | } | ||
+ | |||
+ | /*頁籤變換&第一筆*/ | ||
+ | span ~ #tab > ul li:first-child a, | ||
+ | #tab-1:target ~ #tab > ul li a[href$="#tab-1"], | ||
+ | #tab-2:target ~ #tab > ul li a[href$="#tab-2"], | ||
+ | #tab-3:target ~ #tab > ul li a[href$="#tab-3"], | ||
+ | #tab-4:target ~ #tab > ul li a[href$="#tab-4"] { | ||
+ | background: #fff; | ||
+ | } | ||
+ | |||
+ | /*頁籤內容顯示&第一筆*/ | ||
+ | span ~ #tab > div:first-of-type, | ||
+ | #tab-1:target ~ #tab > div.tab-content-1, | ||
+ | #tab-2:target ~ #tab > div.tab-content-2, | ||
+ | #tab-3:target ~ #tab > div.tab-content-3, | ||
+ | #tab-4:target ~ #tab > div.tab-content-4 { | ||
+ | visibility:visible; | ||
+ | height:200px; | ||
+ | background: #fff; | ||
+ | } | ||
Revision as of 06:26, 16 September 2017