当前位置： 文江博客话题详情

简单JS滑动门代码

发布于 2022-10-15 10:08:06 字数 5293 浏览 26 评论 0

简单JS滑动门代码

代码简介：

简约型TABS选项卡，CSS滑动门代码，一个实现的基本雏形，重要的技术点已经帮你实现，至于你用时候怎么改，要自己发挥一下哦，无非是增加一个框内的ul、li列表，这个很好定义。

代码内容：

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
  4. transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  8. <title>简单JS滑动门代码_网页代码站(www.webdm.cn)</title>
  9. <style type="text/css">
  10. *{
  11.         margin:0;
  12.         padding:0;
  13.         font-size:12px;
  14. }
  15. body{
  16.         margin:5px;
  17. }
  18. .Tab{
  19.         width:300px;
  20. }
  21. .TabBar{
  22.         width:300px;
  23.         list-style-type:none;
  24.         overflow:auto;
  25. }.TabBarNormal
  26. {
  27.         float:left;
  28.         width:60px;
  29.         border:1px solid #0066cc;
  30.         border-bottom:0px solid #fff;
  31.         line-height:24px;
  32.         text-align:center;
  33.         margin:0 3px;
  34.        
  35. }
  36. .TabBarActive{
  37.         float:left;
  38.         width:60px;
  39.         border:1px solid #0066cc;
  40.         border-bottom:0px solid #fff;
  41.         background-color:#CCCCCC;
  42.         line-height:25px;
  43.         text-align:center;
  44.         margin:0 3px;
  45.         color:red
  46. }
  47. .TabContent{
  48.         width:98%;
  49.         height:200px;
  50.         border:1px solid #0066cc;
  51.         padding:5px;
  52.         position:absolute;
  53.         margin-top:-1px;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="Tab">
  59.         <ul class="TabBar">
  60.         <li id="tab1" class="TabBarActive" onmouseover="showTab(1);"><a href="/">最新更新</a></li>
  61.         <li id="tab2" class="TabBarNormal" onmouseover="showTab(2);"><a href="/">下载排行</a></li>
  62.         <li id="tab3" class="TabBarNormal" onmouseover="showTab(3);"><a href="/">软件更新</a></li>
  63.         </ul>
  64.         <div class="TabContent" id="tabContent1">这里是最新更新</div>
  65.         <div class="TabContent" id="tabContent2" >这里是下载排行，<a href="http://webdm.cn">WebDm.CN</a>提供高
  67. 质量代码下载。</div>
  68.         <div class="TabContent" id="tabContent3" >这里是软件更新</div>
  69. </div>
  70. <script type="text/javascript">
  71. var activeTab =1;
  72. var activeTabContent = 1;
  73. var i;
  74. for (i=2;i<=3;i++) {
  75.         document.getElementById("tabContent"+i).style.display="none";
  76. }
  77. function showTabContent(n) {
  78.         document.getElementById("tabContent"+activeTabContent).style.display="none";
  79.         document.getElementById("tabContent"+n).style.display="";
  80.         activeTabContent=n;
  81. }
  82. function showTab(n) {
  83.         document.getElementById("tab"+activeTab).className="TabBarNormal";
  84.         document.getElementById("tab"+n).className="TabBarActive";
  85.         activeTab=n;
  86.         showTabContent(n);
  87. }
  88. </script>
  89. </body>
  90. </html>
  91. <br>
  92. <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

复制代码代码来自：http://www.webdm.cn/webcode/6a81 ... 8-5f664ee433e2.html

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

却一份温柔 2022-10-22 10:08:06

奉献的精神值得鼓励，有没有纯CSS版的滑动门

回复
~没有更多了~

关于作者

清旖

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文