一个javascript滑动标签的例子

最新推荐文章于 2025-02-27 20:04:11 发布

原创最新推荐文章于 2025-02-27 20:04:11 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的JavaScript选项卡切换功能实现方法。通过自定义函数tab()来动态改变HTML元素的样式，实现不同选项卡的内容展示与菜单样式的切换。文章包含完整的代码示例。

javascript代码：

 function tab(a,b,c,start)
    {
        for(i=start;i<=b;i++){
            if(c==i)
            {
                // 判断选择模块
                document.getElementById(a+"_mo_"+i).style.display = "block";  // 显示模块内容
                document.getElementById(a+"_to_"+i).className = "no";   // 改变菜单为选中样式
            }
            else{
                // 没有选择的模块
                document.getElementById(a+"_mo_"+i).style.display = "none"; // 隐藏没有选择的模块
                document.getElementById(a+"_to_"+i).className = "q";  // 清空没有选择的菜单样式
            }
        }

    }

页面HTML：

<div class="page" id="querry_cocn">

     <ul class="tab" id="tab_ul">

        <li id="tab_to_1" class="q"><a onmouseover="tab('tab',3,1,1)" href="#">Informix_CAT:-2936</a></li>

        <li id="tab_to_2" class="no"><a onmouseover="tab('tab',3,2,1)" href="#">Informix_CAT:-2935</a></li>

        <li id="tab_to_3" class="q"><a onmouseover="tab('tab',3,3,1)" href="#">Informix_CAT:-600</a></li>

     </ul>

      <div class="tab_mo" id="tab_mo_div">

                <div id="tab_mo_1" style="display: none; height: 100%;"></div>

               <div id="tab_mo_2" style="display: block; height: 100%;"></div>

               <div id="tab_mo_3" style="display: none; height: 100%;"></div>

    </div>

 </div>