|
|
Line 248: |
Line 248: |
| | | |
| | | |
− | .tab-content{position: relative; min-height:200px; border:1px solid #ddd; margin-top:-1px;}
| |
− | .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;}
| |
− |
| |
− | /* 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;
| |
− | }
| |
− |
| |
| | | |
| </style> | | </style> |