JavaScript加Css简单的选项卡

最新推荐文章于 2023-11-27 15:53:03 发布

熊孩子

最新推荐文章于 2023-11-27 15:53:03 发布

阅读量302

点赞数

文章标签：选项卡

本文链接：https://blog.youkuaiyun.com/qq_43293739/article/details/88132562

版权

本文展示了如何在ASP.NET（VS2010）环境下，利用JavaScript和CSS实现一个简单的静态选项卡功能。通过编写HTML结构，定义CSS样式，并在页面头部引入CSS文件，实现了不同内容区域的切换，各个选项卡背景颜色分别为#CCCCCC、#00CCFF和#666600，状态默认为隐藏或可见。

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

本文介绍一种使用JavaScript+Css设计生成的选项卡效果，只是这里的选项卡是静态的！

制作过程很简单，这里我使用的语言是asp.net（vs2010）.

1.在新建的.aspx网页body标签中，写入下列代码

这是第一个选项卡，欢迎光临！

这是第二个选项卡，欢迎来访！

这是第三个选项卡，欢迎欢迎！

    <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center" bgcolor="#FFCC33" id="menu_0" onmouseover="show_whomenu(0)"><strong>选项卡A</strong></td>
    <td align="center" bgcolor="#0099FF" id="menu_1" onmouseover="show_whomenu(1)"><strong>选项卡B</strong></td>
    <td align="center" bgcolor="#0099FF" id="menu_2" onmouseover="show_whomenu(2)"><strong>选项卡C</strong></td>
    </tr>
    </table>
    </div>

</form>



      2.在head标签中，加入js文件

3.编写css文件设置样式，并在.aspx文件头部引入css文件

#a_0 {
position:absolute;
left:200px;
top:60px;
width:300px;
height:200px;
z-index:1;
background-color: #CCCCCC;
visibility: visible;
}
#a_1 {
position:absolute;
left:200px;
top:60px;
width:300px;
height:200px;
z-index:2;
background-color: #00CCFF;
display:none;
}
#a_2 {
position:absolute;
left:200px;
top:60px;
width:300px;
height:200px;
z-index:3;
background-color: #666600;
display:none;
}
#Layer1 {
position:absolute;
left:200px;
top:30px;
width:300px;
height:30px;
z-index:4;
}
.s1 {
background:#0099FF;

}
.s2 {
background:#FFCC33;
}

程序特别简单，实现的效果还算绚丽，下面展示一下，效果过程图，点击相应的选项卡，会显示相应的内容：

在这里插入图片描述

 附：小程序源代码