Urara-Blog/build/_app/immutable/pages/2022-03-09-css-tab.md-025c63e4.js

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=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab-frame</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">&lt;!--\u6807\u7B7E\u9875\u6807\u9898\u680F--&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">&lt;!-- \u8BBE\u7F6E\u4E00\u4E2A\u4E3Acheck --&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">radio</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">name</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">check</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">label</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">for</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">TAB1</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">label</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">radio</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">name</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab2</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">label</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">for</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab2</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">TAB2</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">label</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">input</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">type</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">radio</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">name</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab3</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">label</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">for</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab3</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">TAB2</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">label</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #546E7A">&lt;!--Tab\u5185\u5BB9--&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab-content</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">THIS IS TAB1 CONTENT</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Notice the gap between the content and tab after applying background cololr</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab-content</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">THIS IS TAB2 CONTENT</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Notice the gap between the content and tab after applying background cololr</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">tab-content</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">THIS IS TAB3 CONTENT</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Notice the gap between the content and tab after applying background cololr</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,ss,x,Z,$s,ts,ls,Tl=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #546E7A">/* \u9690\u85CFinput\u548Ctab\u5185\u5BB9 */</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-frame</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">input</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-content</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> none</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/* \u5BFC\u822A\u680F\u6837\u5F0F\uFF1A\u672A\u9009\u4E2D\u65F6 */</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-frame</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">label</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">555</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">padding</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">10px</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">20px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">border-bottom</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1px</span><span style="color: #EEFFFF"> solid </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">555</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">cursor</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> pointer</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">float</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> left</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/* \u5BFC\u822A\u680F\u6837\u5F0F\uFF1A\u9009\u4E2D\u65F6 */</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-frame</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">input</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">checked</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">label</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">0f71aa</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">border</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1px</span><span style="color: #EEFFFF"> solid </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">555</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">border-bottom</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> none</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">border-radius</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">4px</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">4px</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0px</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">cursor</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> default</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/* Tab\u5185\u5BB9\u6837\u5F0F */</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-frame</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-content</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">0f71aa</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1.5rem</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-weight</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> bold</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">padding-top</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">40px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">clear</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> left</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #546E7A">/* \u70B9\u51FB\u7684\u65F6\u5019\u663E\u793Atab\u5185\u5BB9\uFF0C\u5373input checked\u7684\u65F6\u5019\u663E\u793Alabel*/</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-frame</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">input</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-of-type</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">):</span><span style="color: #C792EA">checked</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">~</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-content</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-of-type</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">1</span><span style="color: #89DDFF">),</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-frame</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">input</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-of-type</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">2</span><span style="color: #89DDFF">):</span><span style="color: #C792EA">checked</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">~</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-content</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-of-type</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">2</span><span style="color: #89DDFF">),</span></div><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-frame</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">input</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-of-type</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">):</span><span style="color: #C792EA">checked</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">~</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">tab-content</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-of-type</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> block</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,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;D<b.length;D+=1)C=js(C,b[D]);return c=new Ml({props:C}),{c(){Ol(c.$$.fragment)},l(D){wl(c.$$.fragment,D)},m(D,f){Ll(c,D,f),u=!0},p(D,[f]){const S=f&1?Il(b,[f&1&&_l(D[0]),f&0&&_l(Sl)]):{};f&2&&(S.$$scope={dirty:f,ctx:D}),c.$set(S)},i(D){u||(Nl(c.$$.fragment,D),u=!0)},o(D){$l(c.$$.fragment,D),u=!1},d(D){ql(c,D)}}}const Sl={title:"CSS \xB7 Tab\u9009\u9879\u5361",summary:"\u4E00\u4E2A\u7EAF CSS \u5B9E\u73B0\u7684 Tab \u9009\u9879\u5361",created:"2022-03-09T07:42:25.299Z",tags:["CSS"],categories:["CSS"],lastmod:"2022-04-07T07:40:02.371Z",slug:"/2022-03-09-css-tab.md",path:"/2022-03-09-css-tab",toc:[{depth:2,title:"\u539F\u7406",slug:"\u539F\u7406"},{depth:2,title:"\u4EE3\u7801",slug:"\u4EE3\u7801"},{depth:3,title:"HTML",slug:"html"},{depth:3,title:"CSS",slug:"css"},{depth:2,title:"\u53C2\u8003",slug:"\u53C2\u8003"}],updated:"2022-08-06T10:50:54.161Z"};function Ul(N,c,u){return N.$$set=b=>{u(0,c=js(js({},c),ml(b)))},c=ml(c),[c]}class sa extends kl{constructor(c){super(),xl(this,c,Ul,Zl,Hl,{})}}export{sa as default,Sl as metadata};