超级简单的tab切换

怼烎@ 2022-05-29 07:54 202阅读 0赞

<!DOCTYPE html>
      <head>
        <meta charset="UTF-8"/>
        <title>tab切换</title>
        <style type="text/css">
          ul,li,div{padding:0;margin:0}ul li{float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:0}ul li.fli{background-color:#ccc;color:red}ul{overflow:hidden;zoom:1;list-style-type:none}#tab_con{width:304px;height:200px}#tab_con div{width:304px;height:200px;display:none;border:1px #bbb solid;border-top:0}#tab_con div.fdiv{display:block;background-color:#ccc}
        </style>
      </head>
      <body>
        <ul id="tab">
          <li class="fli">tab1</li>
          <li>tab2</li>
          <li>tab3</li>
        </ul>
        <div id="tab_con">
          <div class="fdiv">a啊啊啊啊啊啊啊啊啊啊啊啊</div>
          <div>bbbb</div>
          <div>cccc</div>
        </div>
        <script type="text/javascript">
          var tabs = document.getElementById("tab").getElementsByTagName("li");
          var divs = document.getElementById("tab_con").getElementsByTagName("div");
          for (var i = 0; i < tabs.length; i++) {
            tabs[i].onclick = function() {
              change(this);
            }
          }
          function change(obj) {
            for (var i = 0; i < tabs.length; i++) {
              if (tabs[i] == obj) {
                tabs[i].className = "fli";
                divs[i].className = "fdiv";
              } else {
                tabs[i].className = "";
                divs[i].className = "";
              }
            }
          }
        </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 tab栏的简单切换

tab栏的简单切换样式不是很好看，主要的是思路和逻辑上代码： <!DOCTYPE html> <html lang="en"> <

绝地灬酷狼/ 2023年07月08日 09:22/ 0 赞/ 42 阅读

相关 jq 实现简单tab切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2023年03月12日 09:02/ 0 赞/ 168 阅读

相关 JS底层书写的简单Tab切换！

Tab切换 1.题目 > 参照某宝网一个商品详情页，写出tab切换的功能，样式不限，实现功能即可（对dom元素操作） 2.写法与思路 > （1）、对给到的要

痛定思痛。/ 2023年01月18日 09:20/ 0 赞/ 226 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 201 阅读

相关 leaderf的切换tab

fun! Glly() "Gll的异步函数 call feedkeys("\<TAB>") :LeaderfFile call feed

谁践踏了优雅/ 2022年10月06日 06:53/ 0 赞/ 163 阅读

相关 tab切换

/tab切换/ .tab-common { width: 100%; background-color: 25303c; } .tab-common .tab

迷南。/ 2022年06月07日 14:20/ 0 赞/ 258 阅读

相关超级简单的tab切换

<!DOCTYPE html> <head> <meta charset="UTF-8"/> <title>tab切换</t

怼烎@/ 2022年05月29日 07:54/ 0 赞/ 203 阅读

相关 vue tab切换

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年02月21日 05:54/ 0 赞/ 345 阅读

相关 JS实现的简单tab切换功能完整示例

本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <he

怼烎@/ 2021年11月02日 17:12/ 0 赞/ 299 阅读

相关 tab切换效果

![20210203145157983.gif][] 该dome仅供参考: 免费项目dome包在文章最底部 html <view class="mg_bo

系统管理员/ 2021年07月25日 02:44/ 0 赞/ 533 阅读