JavaScript+CSS生成静态水平选项卡效果

女爷i 2022-05-24 07:19 158阅读 0赞

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

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

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

<form id="form1" runat="server">
            <div id="a_0">
                这是第一个选项卡，欢迎光临！
            </div>
            <div id="a_1">
                这是第二个选项卡，欢迎来访！
            </div>
            <div id="a_2">
                这是第三个选项卡，欢迎欢迎！
            </div>
            <div id="Layer1">
    
            <table width="100%" height="30" border="0" cellpadding="0" cellspacing="0">
            <tr>
            <td align="center" bgcolor="#FFCC33" id="menu_0" οnmοuseοver="show_whomenu(0)"><strong>选项卡A</strong></td>
            <td align="center" bgcolor="#0099FF" id="menu_1" οnmοuseοver="show_whomenu(1)"><strong>选项卡B</strong></td>
            <td align="center" bgcolor="#0099FF" id="menu_2" οnmοuseοver="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;
    }

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

![1349426442_4562.jpg][]

附：[小程序源代码][Link 1]

[1349426442_4562.jpg]: https://img-my.csdn.net/uploads/201210/05/1349426442_4562.jpg
[Link 1]: http://download.csdn.net/detail/mazhaojuan/4618112