简单JS滑动门代码
简单JS滑动门代码
代码简介：
简约型TABS选项卡，CSS滑动门代码，一个实现的基本雏形，重要的技术点已经帮你实现，至于你用时候怎么改，要自己发挥一下哦，无非是增加一个框内的ul、li列表，这个很好定义。
代码内容：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
- transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>简单JS滑动门代码_网页代码站(www.webdm.cn)</title>
- <style type="text/css">
- *{
- margin:0;
- padding:0;
- font-size:12px;
- }
- body{
- margin:5px;
- }
- .Tab{
- width:300px;
- }
- .TabBar{
- width:300px;
- list-style-type:none;
- overflow:auto;
- }.TabBarNormal
- {
- float:left;
- width:60px;
- border:1px solid #0066cc;
- border-bottom:0px solid #fff;
- line-height:24px;
- text-align:center;
- margin:0 3px;
- }
- .TabBarActive{
- float:left;
- width:60px;
- border:1px solid #0066cc;
- border-bottom:0px solid #fff;
- background-color:#CCCCCC;
- line-height:25px;
- text-align:center;
- margin:0 3px;
- color:red
- }
- .TabContent{
- width:98%;
- height:200px;
- border:1px solid #0066cc;
- padding:5px;
- position:absolute;
- margin-top:-1px;
- }
- </style>
- </head>
- <body>
- <div class="Tab">
- <ul class="TabBar">
- <li id="tab1" class="TabBarActive" onmouseover="showTab(1);"><a href="/">最新更新</a></li>
- <li id="tab2" class="TabBarNormal" onmouseover="showTab(2);"><a href="/">下载排行</a></li>
- <li id="tab3" class="TabBarNormal" onmouseover="showTab(3);"><a href="/">软件更新</a></li>
- </ul>
- <div class="TabContent" id="tabContent1">这里是最新更新</div>
- <div class="TabContent" id="tabContent2" >这里是下载排行，<a href="http://webdm.cn">WebDm.CN</a>提供高
- 质量代码下载。</div>
- <div class="TabContent" id="tabContent3" >这里是软件更新</div>
- </div>
- <script type="text/javascript">
- var activeTab =1;
- var activeTabContent = 1;
- var i;
- for (i=2;i<=3;i++) {
- document.getElementById("tabContent"+i).style.display="none";
- }
- function showTabContent(n) {
- document.getElementById("tabContent"+activeTabContent).style.display="none";
- document.getElementById("tabContent"+n).style.display="";
- activeTabContent=n;
- }
- function showTab(n) {
- document.getElementById("tab"+activeTab).className="TabBarNormal";
- document.getElementById("tab"+n).className="TabBarActive";
- activeTab=n;
- showTabContent(n);
- }
- </script>
- </body>
- </html>
- <br>
- <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
复制代码代码来自：http://www.webdm.cn/webcode/6a81 ... 8-5f664ee433e2.html
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
奉献的精神值得鼓励，有没有纯CSS版的滑动门