import{S as kl,i as xl,s as Hl,C as js,w as Ol,x as wl,y as Ll,z as Il,A as _l,f as Nl,t as $l,B as ql,X as ml,l as o,r as e,a as d,V as Bl,m as n,n as p,u as F,h as a,c as v,W as Al,p as r,b as i,G as l,E as Pl}from"../chunks/index-cd58b8d1.js";import{P as Ml}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function Jl(N){let c,u,b,C,D,f,S,$,y,ys,z,is,Es,m,ds,vs,G,Cs,fs,V,us,bs,j,hs,_s,K,ms,Bs,Q,As,Ss,q,g,gs,Ts,ns,T,P,ks,ps,M,h,R,xs,Hs,W,Os,ws,X,Ls,Is,es,k,J,Ns,Fs,Y,gl=`
`,ss,x,Z,$s,ts,ls,Tl=`html
<div class="tab-frame"><!--\u6807\u7B7E\u9875\u6807\u9898\u680F--><!-- \u8BBE\u7F6E\u4E00\u4E2A\u4E3Acheck --><input type="radio" name="tab" id="tab1" check /><label for="tab1">TAB1</label><input type="radio" name="tab" id="tab2" /><label for="tab2">TAB2</label><input type="radio" name="tab" id="tab3" /><label for="tab3">TAB2</label><!--Tab\u5185\u5BB9--><div class="tab-content"><p>THIS IS TAB1 CONTENT</p><p>Notice the gap between the content and tab after applying background cololr</p></div><div class="tab-content"><p>THIS IS TAB2 CONTENT</p><p>Notice the gap between the content and tab after applying background cololr</p></div><div class="tab-content"><p>THIS IS TAB3 CONTENT</p><p>Notice the gap between the content and tab after applying background cololr</p></div></div>
`,as,H,U,qs,rs,O,Ps,B,Ms,cs,_,Js,Zs,os,w,A,Us,L,zs;return{c(){c=o("p"),u=e("\u4E00\u4E2A\u7EAF CSS \u5B9E\u73B0\u7684 Tab \u9009\u9879\u5361"),b=d(),C=o("h2"),D=o("a"),f=e("\u539F\u7406"),S=d(),$=o("blockquote"),y=o("p"),ys=e("\u901A\u8FC7\u9690\u85CF\u7684 "),z=o("code"),is=e("input"),Es=e(" \u548C\u4E0E\u4E4B\u5173\u8054\u7684 "),m=o("a"),ds=e("label"),vs=e(" \u70B9\u51FB "),G=o("code"),Cs=e("label"),fs=e(" \u89E6\u53D1 "),V=o("code"),us=e("input"),bs=e(" \u7684 "),j=o("code"),hs=e("checked"),_s=e(" \u72B6\u6001\u89E6\u53D1\u7684\uFF0C\u518D\u914D\u5408\u4F7F\u7528\u5143\u7D20\u72B6\u6001\u7684\u4F2A\u7C7B "),K=o("code"),ms=e(":checked "),Bs=e("\u6837\u5F0F\u5C31\u53EF\u4EE5\u5B9E\u73B0\u4E0D\u540C\u72B6\u6001\u7684\u5207\u6362\uFF0C\u4E2D\u95F4\u7684\u8FC7\u5EA6\u6548\u679C\u8FD8\u53EF\u4EE5\u914D\u5408 CSS3 \u7684 "),Q=o("code"),As=e("transition"),Ss=e("\u8FC7\u5EA6\u6548\u679C\u5B9E\u73B0 "),q=o("sup"),g=o("a"),gs=e("1"),Ts=e("\u3002"),ns=d(),T=o("h2"),P=o("a"),ks=e("\u4EE3\u7801"),ps=d(),M=o("ul"),h=o("li"),R=o("code"),xs=e("input"),Hs=e(" \u7684"),W=o("code"),Os=e("name"),ws=e(" \u90FD\u4E00\u6837\uFF0C"),X=o("code"),Ls=e("id"),Is=e("\u4E0D\u540C"),es=d(),k=o("h3"),J=o("a"),Ns=e("HTML"),Fs=d(),Y=new Bl(!1),ss=d(),x=o("h3"),Z=o("a"),$s=e("CSS"),ts=d(),ls=new Bl(!1),as=d(),H=o("h2"),U=o("a"),qs=e("\u53C2\u8003"),rs=d(),O=o("p"),Ps=e("Demo\uFF1A"),B=o("a"),Ms=e("Tabs CSS & HTML, no JS & Jquery"),cs=d(),_=o("div"),Js=o("hr"),Zs=d(),os=o("ol"),w=o("li"),A=o("a"),Us=e("CSS tab \u9009\u9879\u5361 (\u6807\u7B7E\u9875) \u5207\u6362"),L=o("a"),zs=e("\u21A9"),this.h()},l(s){c=n(s,"P",{});var t=p(c);u=F(t,"\u4E00\u4E2A\u7EAF CSS \u5B9E\u73B0\u7684 Tab \u9009\u9879\u5361"),t.forEach(a),b=v(s),C=n(s,"H2",{id:!0});var Ks=p(C);D=n(Ks,"A",{href:!0});var Qs=p(D);f=F(Qs,"\u539F\u7406"),Qs.forEach(a),Ks.forEach(a),S=v(s),$=n(s,"BLOCKQUOTE",{});var Rs=p($);y=n(Rs,"P",{});var E=p(y);ys=F(E,"\u901A\u8FC7\u9690\u85CF\u7684 "),z=n(E,"CODE",{});var Ws=p(z);is=F(Ws,"input"),Ws.forEach(a),Es=F(E," \u548C\u4E0E\u4E4B\u5173\u8054\u7684 "),m=n(E,"A",{href:!0,rel:!0,target:!0});var Xs=p(m);ds=F(Xs,"label"),Xs.forEach(a),vs=F(E," \u70B9\u51FB "),G=n(E,"CODE",{});var Ys=p(G);Cs=F(Ys,"label"),Ys.forEach(a),fs=F(E," \u89E6\u53D1 "),V=n(E,"CODE",{});var sl=p(V);us=F(sl,"input"),sl.forEach(a),bs=F(E," \u7684 "),j=n(E,"CODE",{});var ll=p(j);hs=F(ll,"checked"),ll.forEach(a),_s=F(E," \u72B6\u6001\u89E6\u53D1\u7684\uFF0C\u518D\u914D\u5408\u4F7F\u7528\u5143\u7D20\u72B6\u6001\u7684\u4F2A\u7C7B "),K=n(E,"CODE",{});var al=p(K);ms=F(al,":checked "),al.forEach(a),Bs=F(E,"\u6837\u5F0F\u5C31\u53EF\u4EE5\u5B9E\u73B0\u4E0D\u540C\u72B6\u6001\u7684\u5207\u6362\uFF0C\u4E2D\u95F4\u7684\u8FC7\u5EA6\u6548\u679C\u8FD8\u53EF\u4EE5\u914D\u5408 CSS3 \u7684 "),Q=n(E,"CODE",{});var ol=p(Q);As=F(ol,"transition"),ol.forEach(a),Ss=F(E,"\u8FC7\u5EA6\u6548\u679C\u5B9E\u73B0 "),q=n(E,"SUP",{id:!0});var nl=p(q);g=n(nl,"A",{href:!0,class:!0});var pl=p(g);gs=F(pl,"1"),pl.forEach(a),nl.forEach(a),Ts=F(E,"\u3002"),E.forEach(a),Rs.forEach(a),ns=v(s),T=n(s,"H2",{id:!0});var el=p(T);P=n(el,"A",{href:!0});var Fl=p(P);ks=F(Fl,"\u4EE3\u7801"),Fl.forEach(a),el.forEach(a),ps=v(s),M=n(s,"UL",{});var tl=p(M);h=n(tl,"LI",{});var I=p(h);R=n(I,"CODE",{});var rl=p(R);xs=F(rl,"input"),rl.forEach(a),Hs=F(I," \u7684"),W=n(I,"CODE",{});var cl=p(W);Os=F(cl,"name"),cl.forEach(a),ws=F(I," \u90FD\u4E00\u6837\uFF0C"),X=n(I,"CODE",{});var Dl=p(X);Ls=F(Dl,"id"),Dl.forEach(a),Is=F(I,"\u4E0D\u540C"),I.forEach(a),tl.forEach(a),es=v(s),k=n(s,"H3",{id:!0});var yl=p(k);J=n(yl,"A",{href:!0});var il=p(J);Ns=F(il,"HTML"),il.forEach(a),yl.forEach(a),Fs=v(s),Y=Al(s,!1),ss=v(s),x=n(s,"H3",{id:!0});var El=p(x);Z=n(El,"A",{href:!0});var dl=p(Z);$s=F(dl,"CSS"),dl.forEach(a),El.forEach(a),ts=v(s),ls=Al(s,!1),as=v(s),H=n(s,"H2",{id:!0});var vl=p(H);U=n(vl,"A",{href:!0});var Cl=p(U);qs=F(Cl,"\u53C2\u8003"),Cl.forEach(a),vl.forEach(a),rs=v(s),O=n(s,"P",{});var Gs=p(O);Ps=F(Gs,"Demo\uFF1A"),B=n(Gs,"A",{href:!0,rel:!0,target:!0});var fl=p(B);Ms=F(fl,"Tabs CSS & HTML, no JS & Jquery"),fl.forEach(a),Gs.forEach(a),cs=v(s),_=n(s,"DIV",{class:!0});var Ds=p(_);Js=n(Ds,"HR",{}),Zs=v(Ds),os=n(Ds,"OL",{});var ul=p(os);w=n(ul,"LI",{id:!0});var Vs=p(w);A=n(Vs,"A",{href:!0,rel:!0,target:!0});var bl=p(A);Us=F(bl,"CSS tab \u9009\u9879\u5361 (\u6807\u7B7E\u9875) \u5207\u6362"),bl.forEach(a),L=n(Vs,"A",{href:!0,class:!0});var hl=p(L);zs=F(hl,"\u21A9"),hl.forEach(a),Vs.forEach(a),ul.forEach(a),Ds.forEach(a),this.h()},h(){r(D,"href","#\u539F\u7406"),r(C,"id","\u539F\u7406"),r(m,"href","https://so.csdn.net/so/search?q=label&spm=1001.2101.3001.7020"),r(m,"rel","nofollow noopener noreferrer external"),r(m,"target","_blank"),r(g,"href","#fn-1"),r(g,"class","footnote-ref"),r(q,"id","fnref-1"),r(P,"href","#\u4EE3\u7801"),r(T,"id","\u4EE3\u7801"),r(J,"href","#html"),r(k,"id","html"),Y.a=ss,r(Z,"href","#css"),r(x,"id","css"),ls.a=as,r(U,"href","#\u53C2\u8003"),r(H,"id","\u53C2\u8003"),r(B,"href","https://codepen.io/llgruff/pen/ZGBxOa"),r(B,"rel","nofollow noopener noreferrer external"),r(B,"target","_blank"),r(A,"href","https://blog.csdn.net/baiding1123/article/details/51889201"),r(A,"rel","nofollow noopener noreferrer external"),r(A,"target","_blank"),r(L,"href","#fnref-1"),r(L,"class","footnote-backref"),r(w,"id","fn-1"),r(_,"class","footnotes")},m(s,t){i(s,c,t),l(c,u),i(s,b,t),i(s,C,t),l(C,D),l(D,f),i(s,S,t),i(s,$,t),l($,y),l(y,ys),l(y,z),l(z,is),l(y,Es),l(y,m),l(m,ds),l(y,vs),l(y,G),l(G,Cs),l(y,fs),l(y,V),l(V,us),l(y,bs),l(y,j),l(j,hs),l(y,_s),l(y,K),l(K,ms),l(y,Bs),l(y,Q),l(Q,As),l(y,Ss),l(y,q),l(q,g),l(g,gs),l(y,Ts),i(s,ns,t),i(s,T,t),l(T,P),l(P,ks),i(s,ps,t),i(s,M,t),l(M,h),l(h,R),l(R,xs),l(h,Hs),l(h,W),l(W,Os),l(h,ws),l(h,X),l(X,Ls),l(h,Is),i(s,es,t),i(s,k,t),l(k,J),l(J,Ns),i(s,Fs,t),Y.m(gl,s,t),i(s,ss,t),i(s,x,t),l(x,Z),l(Z,$s),i(s,ts,t),ls.m(Tl,s,t),i(s,as,t),i(s,H,t),l(H,U),l(U,qs),i(s,rs,t),i(s,O,t),l(O,Ps),l(O,B),l(B,Ms),i(s,cs,t),i(s,_,t),l(_,Js),l(_,Zs),l(_,os),l(os,w),l(w,A),l(A,Us),l(w,L),l(L,zs)},p:Pl,d(s){s&&a(c),s&&a(b),s&&a(C),s&&a(S),s&&a($),s&&a(ns),s&&a(T),s&&a(ps),s&&a(M),s&&a(es),s&&a(k),s&&a(Fs),s&&Y.d(),s&&a(ss),s&&a(x),s&&a(ts),s&&ls.d(),s&&a(as),s&&a(H),s&&a(rs),s&&a(O),s&&a(cs),s&&a(_)}}}function Zl(N){let c,u;const b=[N[0],Sl];let C={$$slots:{default:[Jl]},$$scope:{ctx:N}};for(let D=0;Dcss
/* \u9690\u85CFinput\u548Ctab\u5185\u5BB9 */.tab-frame input,.tab-content {display: none;}/* \u5BFC\u822A\u680F\u6837\u5F0F\uFF1A\u672A\u9009\u4E2D\u65F6 */.tab-frame label {color: #555;padding: 10px 20px;border-bottom: 1px solid #555;cursor: pointer;float: left;}/* \u5BFC\u822A\u680F\u6837\u5F0F\uFF1A\u9009\u4E2D\u65F6 */.tab-frame input:checked + label {color: #0f71aa;border: 1px solid #555;border-bottom: none;border-radius: 4px 4px 0px 0px;cursor: default;}/* Tab\u5185\u5BB9\u6837\u5F0F */.tab-frame .tab-content {color: #0f71aa;font-size: 1.5rem;font-weight: bold;padding-top: 40px;clear: left;}/* \u70B9\u51FB\u7684\u65F6\u5019\u663E\u793Atab\u5185\u5BB9\uFF0C\u5373input checked\u7684\u65F6\u5019\u663E\u793Alabel*/.tab-frame input:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),.tab-frame input:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),.tab-frame input:nth-of-type(3):checked ~ .tab-content:nth-of-type(3) {display: block;}