javascript 写的tab页代码

最新推荐文章于 2023-12-26 21:16:38 发布

原创最新推荐文章于 2023-12-26 21:16:38 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #div #border #layer #iframe #class

代码人生专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的Tab页面切换效果。通过修改不同Tab的样式类来达到视觉上的激活与非激活状态，并更新主区域iframe的内容源，实现内容的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Javascript Tab 页测试</title>
<style>
div.activetab
{
    position: absolute;
    padding:5px;
    text-align:center;
    vertital-align:middle;
    cursor:hand;
    border:1px solid #000000;
    border-bottom:0px;
    background-color:#ffffff;
    color:#0000ff;
    z-index:3;
    width: 165px;
    height: 30px;
    left: 50px;
    top: 55px;

}
div.othertab
{
    position: absolute;
    padding:5px;
    text-align:center;
    vertital-align:middle;
    cursor:hand;
    border:1px solid #000000;
    background-color:#efefef;
    z-index:1;
    width: 165px;
    height: 30px;
    left: 214px;
    top: 55px;
    color:#000000;

}
div.mainlayer
{
    position: absolute;
    text-align:center;
    vertital-align:middle;
    cursor:hand;
    border:1px solid #000000;
    background-color:#ffffff;
    z-index:2;
    width:600px;
    height:400px;
    left:50px;
    top:83px;

}
</style>
<script language="javascript">
    function ActiveTab(id,src)
    {
        var oid = 1;
        if(id == 1)
            oid = 2;

        var activeTab = document.all["layer"+id];
        var otherTab = document.all["layer"+oid];

        //activeTab.style.width = 200;
        activeTab.className = "activetab";
        otherTab.className ="othertab";

        document.all["PlayListFrame"].src = src;

    }
</script>
</head>

<body>

<div class="activetab" id="layer1" onclick="ActiveTab(1,'a.htm')">
    Tab1
</div>
<div class="othertab" id="layer2" onclick="ActiveTab(2,'b.htm')">
    Tab2
</div>
<div class="mainlayer" id="MainLayer">
      <iframe id="PlayListFrame" frameborder="0" src="a.htm" style="MARGIN:0px">
        </iframe>
</div>

<div style="position: absolute; width: 604px; height: 33px; z-index: 4; left: 48px; top: 18px" id="layer3">
　</div>

</body>

</html>

运行效果:

第一个tab效果第二个tab效果