论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > javascript教程教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

JavaScript+CSS实现tab

文章类别：javascript教程 | 发表日期:2008-10-5 17:48:03

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>使用JavaScript实现的tab</title>

    <style type="text/css">

    /*设置超链接样式*/

    a

    {

        color: #5086a5;

        text-decoration: none;

        font-size: 12px;

         }

    a:hover

    {

         color: #5086a5;

        text-decoration: underline;

        font-size: 12px;

         }

    a:visited

    {

        color: #5086a5;

        font-size: 12px;

        }

    /*整个tab层居中，宽度为600px*/

    #tabDiv

    {

        width:600px;

        margin:1em auto;

        padding-bottom: 10px;

        border-right: #b2c9d3 1px solid;

        border-top: #b2c9d3 1px solid;

        border-left: #b2c9d3 1px solid;

        border-bottom: #b2c9d3 1px solid;

        background: #ffffff;

         }

    /*tab头的样式*/

    #tabsHead

    {

         padding-left: 0px;

         height: 26px;

         background-color: #e8f7fc;

         font-size: 1em;

         margin: 1px 0px 0px;

         color: #5086a5;

         line-height: 26px;

         }

    /*已选tab头（超链接）的样式*/

    .curtab

    {

        padding-top: 0px;

        padding-right: 10px;

        padding-bottom: 0px;

        padding-left: 10px;

        border-right: #b2c9d3 1px solid;

        font-weight: bold;

        float: left;

        cursor: pointer;

        background: #ffffff;

        }

     /*未选tab头（超链接）的样式*/

    .tabs

    {

        border-right: #c1d8e0 1px solid;

        padding-top: 0px;

        padding-right: 10px;

        padding-bottom: 0px;

        padding-left: 10px;

        font-weight: normal;

        float: left;

        cursor: pointer;

        }

    p

    {

        font-size:9pt;

        margin-left:20pt;

    }

    </style>

    <script language="javascript" type="text/jscript">

    <!--

        //显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）

        function showTab(tabHeadId,tabContentId)

        {

            //tab层

            var tabDiv = document.getElementById("tabDiv");

            //将tab层中所有的内容层设为不可见

            //遍历tab层下的所有子节点

            var taContents = tabDiv.childNodes;

            for(i=0; i<taContents.length; i++)

            {

                //将所有内容层都设为不可见

                if(taContents[i].id!=null && taContents[i].id != 'tabsHead')

                {

                    taContents[i].style.display = 'none';

                }

            }

            //将要显示的层设为可见

            document.getElementById(tabContentId).style.display = 'block';

           

            //遍历tab头中所有的超链接

            var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');

            for(i=0; i<tabHeads.length; i++)

            {

                //将超链接的样式设为未选的tab头样式

                tabHeads[i].className='tabs';

            }

            //将当前超链接的样式设为已选tab头样式

            document.getElementById(tabHeadId).className='curtab';

            document.getElementById(tabHeadId).blur();

        }

    -->

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <!--tab控件-->

        <div id="tabDiv">

             <!--tab头-->

             <div id="tabsHead">

                 <a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗头凤</a>

                 <a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">卜算子·咏梅</a>

             </div>

             <div id="tabContent1" style="display:block">

                 <p>

                 红稣手，黄藤酒，<br />

                 满城春色宫墙柳。<br />

                 东风恶，欢情薄。<br />

                 一杯愁绪，几年离索。<br />

                 错、错、错。<br /><br />

                 春如旧，人空瘦，<br />

                 泪痕红浥鲛绡透。<br />

                 桃花落，闲池阁，<br />

                 山盟虽在，锦书难托。<br />

                 莫、莫、莫。<br />

                 </p>

             </div>

             <div id="tabContent2" style="display:none">

                 <p>

                 驿外断桥边，寂寞开无主。<br />

                 已是黄昏独自愁，更著风和雨。<br />

                 无意苦争春，一任群芳妒。<br />

                 零落成泥碾作尘，只有香如故。<br />

                 </p>

             </div>

        </div>

         <!--tb控件结束-->

    </form>

</body>

</html>
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058