|
|
| 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> |
