Js模块化开发案例1——Tab切换

最新推荐文章于 2022-04-19 10:37:04 发布

子墨爸爸

最新推荐文章于 2022-04-19 10:37:04 发布

阅读量929

点赞数

分类专栏： Js模块化开发案例分析文章标签： Tab

本文链接：https://blog.csdn.net/wupd2014/article/details/49681873

版权

Js模块化开发案例分析专栏收录该内容

34 篇文章 1 订阅

订阅专栏

Tab切换是开发中必不可少的一项内容，最通俗的解释是：通过不同的标签可以看到不同的内容，那么如何利用JS+DIV实现最简单的Tab切换呢？
首先我们看看下面一段HTML代码：

                    <div class="hb_zjhbn">
                        <div class="hbcx_link" id="cc1" onmouseover="setBab9('cc',1,2)">
                标签一
                        </div>
                        <div style="display: none;" class="zjhb_xxk" id="con_cc_1">
                            <div id="hbgk1" name="河北概况1" runat="server" class=" column">
                                标签一对应的内容区域
                            </div>
                        </div>
                        <div class="hbcx_link" id="cc2" onmouseover="setBab9('cc',2,2)">
                     标签二
                        </div>
                        <div class="zjhb_xxk" id="con_cc_2" style="display: none;">
                            <div id="zygk1" name="资源概况1" runat="server" class=" column">
                              标签二对应的内容区域
                            </div>
                        </div>
                </div>

主要特点是：标签的ID以cc+i命名，内容区域的ID以con_cc_+i命名，这样的好处是可以通过循环的方式对标签进行切换，不要一个个写
Js代码如下：

  function setBab9(name, cursel, n) {
      for (i = 1; i <= n; i++) {
         var menu = document.getElementById
         (name + i); var con = document.getElementById
         ("con_" + name + "_" + i);
         menu.className = i == cursel ? "hbcx_hover" : "hbcx_link";
         con.style.display = i == cursel ? "block" : "none";
         if (document.getElementById("con_" + name + "_" + "more_" + i)) {
             document.getElementById("con_" + name + "_" + "more_" + i).style.display = i == cursel ? "block" : "none";
                }
            }
        }

        .hb_zjhb {
            width: 998px;
            height: auto;
            margin: 0 auto;
            /*border: 1px solid #d7d7d7;*/
        }

        .zjhb_xxk {
            width: 922px;
            height: 100%;
            float: left;
            border-right: 1px solid #ffffff;
        }

        .hbcx_link {
            width: 31px;
            height: 274px !important;
            height: 173px;
            font-size: 12px;
            color: #000000;
            text-align: center;
            padding-top: 20px;
            line-height: 30px;
            border-left: 1px solid #ffffff;
            border-right: 1px solid #ffffff;
            background-color: #e9e9e9;
            float: left;
        }

        .hbcx_hover {
            background-image: url("Images/addimg/zjhb_listbg.jpg");
            border-left: 1px solid #ffffff;
            border-right: 1px solid #ffffff;
            color: #ffffff;
            float: left;
            font-size: 14px;
            font-weight: bold;
            height: 274px !important;
            line-height: 30px;
            padding-top: 20px;
            text-align: center;
            width: 31px;
        }