javascript横排竖排标准选项卡效果代码

2020-10-23 18:35:32

字体：大中小

来源：转载

供稿：网友

<!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,个人主页,无聊,神经,懒惰" /> <meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." /> <meta name="Author" content="PRcss,qq:50198763" /> <meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" /> <title>PRcss的选项卡 www.VeVB.COm</title> <style type="text/css">  </style> </head> <body> <div id="tab01">     <h3>首页</h3>         <div class="jj"><p>嘿嘿，无视div原始class值。</p></div>     <h3 class="pr">测试</h3>         <div><p>继续无视h3原始class值。</p></div>     <h3>无聊</h3>         <div><p>h3没有值也可以～</p></div>     <h3 class="box">傻蛋</h3>         <div><p>div没有值一样可以～</p></div> </div> <div id="tab02">     <h4>首页</h4>         <ol class="pr"><li>嘿嘿，无视容器原始class值。</li></ol>     <h4 class="box">测试</h4>         <ol><li>继续无视h3原始class值。</li></ol>     <h4>无聊</h4>         <ol><li>h3没有值也可以～</li></ol>     <h4 class="bb">傻蛋</h4>         <ol><li>div没有值一样可以～</li></ol> </div> <div id="tab03">     <h3>首页</h3>         <div class="tab"><p>嘿嘿，无视h3原始class值。</p></div>     <h3>测试</h3>         <div class="tab wushi"><p>继续无视div原始class值。</p></div>     <h3>无聊</h3>         <div class="tab"><p>h3没有值也可以～</p></div>     <h3 class="box">傻蛋</h3>         <div class="tab tab123"><p>class值相似一样也可以～</p><div><p>指定class后，即时再多一个div也行。</p></div></div> </div> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：line-block的运用最小宽度的设置

下一篇：网页中Span和Div的区别