javascript橫排豎排標(biāo)準(zhǔn)選項卡效果代碼

2020-10-23 18:35:32

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="PRcss,xhtml,html,css,js,book,個人主頁,無聊,神經(jīng),懶惰" /> <meta name="description" content="PRcss的個人主頁,無聊的,神經(jīng)的,懶惰的..." /> <meta name="author" content="http://www.survivalescaperooms.com/"/> <meta name="Copyright" content="本頁版權(quán)歸PRcss所有。All Rights Reserved" /> <title>PRcss的選項卡 www.survivalescaperooms.com</title> <style type="text/css">  </style> </head> <body> <div   class="iwvjtn8m0"   id="tab01">     <h3>首頁</h3>         <div   id="iwvjtn8m0"   class="jj"><p>嘿嘿，無視div原始class值。</p></div>     <h3 class="pr">測試</h3>         <div><p>繼續(xù)無視h3原始class值。</p></div>     <h3>無聊</h3>         <div><p>h3沒有值也可以～</p></div>     <h3 class="box">傻蛋</h3>         <div><p>div沒有值一樣可以～</p></div> </div> <div   class="iwvjtn8m0"   id="tab02">     <h4>首頁</h4>         <ol class="pr"><li>嘿嘿，無視容器原始class值。</li></ol>     <h4 class="box">測試</h4>         <ol><li>繼續(xù)無視h3原始class值。</li></ol>     <h4>無聊</h4>         <ol><li>h3沒有值也可以～</li></ol>     <h4 class="bb">傻蛋</h4>         <ol><li>div沒有值一樣可以～</li></ol> </div> <div   class="iwvjtn8m0"   id="tab03">     <h3>首頁</h3>         <div   id="iwvjtn8m0"   class="tab"><p>嘿嘿，無視h3原始class值。</p></div>     <h3>測試</h3>         <div   id="iwvjtn8m0"   class="tab wushi"><p>繼續(xù)無視div原始class值。</p></div>     <h3>無聊</h3>         <div   id="iwvjtn8m0"   class="tab"><p>h3沒有值也可以～</p></div>     <h3 class="box">傻蛋</h3>         <div   id="iwvjtn8m0"   class="tab tab123"><p>class值相似一樣也可以～</p><div><p>指定class后，即時再多一個div也行。</p></div></div> </div> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

上一篇：line-block的運用最小寬度的設(shè)置

下一篇：網(wǎng)頁中Span和Div的區(qū)別