javascript 写的tab页代码

本文介绍了一个使用纯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效果

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值