javascript的tab标签

最新推荐文章于 2022-05-28 11:53:17 发布
最新推荐文章于 2022-05-28 11:53:17 发布
阅读量2.8k 收藏
点赞数
文章标签： javascript tabs class div xhtml float

这个是一篇原理性的文章

http://www.javaeye.com/topic/218610

使用JavaScript和CSS相结合，可以很容易实现这种效果，其实现原理如下：
    （1）将整个tab分成两个部分，第一部分为tab头，也就是上面中蓝色底的部分。第二部分为tab内容，也就是下面显示具体内容的部分。

     （2）在tab头中，可以包括多个选项卡，如新闻是一个选项卡、图片新闻是另一个选项卡。每一个选项卡，事实上就是一个超链接。在默认情况下，首先显示的是第一个选项卡中的内容，所以可以先使用CSS将第一个超链接的背景色设为白色，以区别其他选项卡。而其他选项卡的背景色和tab头的背景色相同，都为蓝色。

     （3）当用户选择了某个选项卡时，可以先将所有的选项卡的背景色都设为蓝色，然后将选择的这个选项卡的背景色设为白色。

     （4）不同选项卡所要显示的内容都放不同的层中，而这些层都重叠地放在tab头下面。在初始状态下，除了第一个选项卡对应的层之外，所有的层默认为不显示。

     （5）当选择某个选项卡时，先将所有的内容层都设为隐藏，然后将访选项卡所对应的内容层设为显示。

 

 

可以使用的插件
http://www.sunsean.com/idTabs/

 

 

 

代码

<!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>
                 <a class="tabs" id="tabs3" href="javascript:showTab('tabs3','tabContent3')">周二</a>
                 <a class="tabs" id="tabs4" href="javascript:showTab('tabs4','tabContent4')">周三</a>
                 <a class="tabs" id="tabs5" href="javascript:showTab('tabs5','tabContent5')">周四</a>
                 <a class="tabs" id="tabs6" href="javascript:showTab('tabs6','tabContent6')">周五</a>
                 <a class="tabs" id="tabs7" href="javascript:showTab('tabs7','tabContent7')">周六</a>
             </div>

             <div id="tabContent1" style="display:block">
                 <p>
                 周日早上好，一切都好,哈哈哈，^_^<br />
                 </p>

             </div>

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

                 <p>

                 周一早上好，一切都好，^_^<br />

                 </p>

             </div>
             <div id="tabContent3" style="display:none">

                 <p>

                 周二早上好，一切都好，^_^<br />

                 </p>

             </div>
             <div id="tabContent4" style="display:none">

                 <p>

                 周三早上好，一切都好，^_^<br />

                 </p>

             </div>
             <div id="tabContent5" style="display:none">

                 <p>

                 周四早上好，一切都好，^_^<br />

                 </p>

             </div>
             <div id="tabContent6" style="display:none">

                 <p>

                 周五早上好，一切都好，^_^<br />

                 </p>

             </div>
             <div id="tabContent7" style="display:none">

                 <p>

                 周六早上好，一切都好，^_^<br />

                 </p>

             </div>

        </div>

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

    </form>

</body>

</html>

 

charles_mo
关注
专栏目录
JavaScript Tab
07-27
NULL 博文链接：https://snowdymy.iteye.com/blog/765667
基于JavaScript实现TAB标签效果
11-22
js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签代码需要的朋友参考下 废话不多说了，直接给大家贴代码了： <html> <head> <meta ...
js实现tab标签
thewebcode
06-15 123
&lt;html&gt; &lt;head&gt; &lt;title&gt;tab标签&lt;/title&gt; &lt;/head&gt; &lt;style type='text/css'&gt; *{ margin:0; padding:0; background-color:#ccc; } #main{ margin:30px auto; width:...
javascript——tab
weixin_34268610的博客
07-29 79
为什么80%的码农都做不了架构师？>>> ...
javascript--tab
码_龙的博客
05-03 579
Insert title here ul{ list-style-type:none; padding:0; } #tab li{ float:left; width:100px; height:30px; line-height:30px; font-size:22px; border:1px solid red; border-top-left-radius:5px
JavaScript tab页
weixin_30393907的博客
12-27 260
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>实践题 - 选项卡</title> 6 <style type="text/css"> 7 /* CSS样式...
JavaScript tab标签 自适应宽度的标签导航
05-18
在前端开发中，JavaScript Tab标签是一种常见的用户界面元素，它用于组织和展示多部分内容，而自适应宽度的标签导航则是为了确保在不同设备和屏幕尺寸下都能提供良好的用户体验。本篇将深入探讨如何使用JavaScript...
javascript TAB标签雅虎3屏标签式焦点图代码
05-18
在JavaScript的世界里，"javascript TAB标签雅虎3屏标签式焦点图代码"是一个常见的前端开发实践，用于构建交互式的用户体验。这种技术常被用于网站的首页或者产品展示区域，通过切换不同的图片或内容来吸引用户的...
javascript tab标签 韩国购物网Flash标签切换效
05-18
而"javascript tab标签 韩国购物网Flash标签切换效.js"可能是实现这个功能的核心JavaScript代码文件，它包含了上述关键技术点的实现细节。 总的来说，JavaScript tab标签切换效果的实现涉及到了前端开发中的基本...
javascript tab标签 不规则TAB选项卡效果源码
05-18
这个源码包提供的内容是实现这种不规则Tab选项卡效果的JavaScript代码。开发者可以通过学习和使用这个源码，了解如何利用JavaScript来创建自定义的Tab切换效果。下面将详细解释JavaScript在实现选项卡效果时涉及的...
javascript----一个Tab的JS
12-04
对JS初步学习者，很好的一个实例,希望大家讨论。。
Javascript—Tab切换
09-01
Javascript—Tab切换
JavaScript面向对象—— 动态创建tab标签页
爱前端的程序媛的博客
05-04 3727
昨天呢，介绍了js中类的概念，以及使用类创建对象的过程。今天就用js中的类实现一个小的功能，动态添加、删除标签页。emmmmm，也有点像tab栏切换，不过比tab栏切换多了添加和删除的功能。 案例说明 js动态实现标签页的创建和删除。这个案例呢，要用类来实现，Tab就是本次案例的类。但在写之前需要来分析并抽象类的特征和行为，也就是对应的类的属性和方法。 这里呢，我把元素的ID作为属性，增删改查的四...
JavaScript实现的tab
天祺围棋
11-07 775
html xmlns="http://www.w3.org/1999/xhtml" > head runat="server"> title>使用JavaScript实现的tabtitle> style type="text/css"> /*设置超链接样式*/ a { color: #5086a5; text-decoration
Js面向对象案例01：tab标签
胡图图的博客
05-28 271
运行效果 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对象编程</title> </head> <body> <div i
JavaScript——Tab切换
qq_35052286的博客
06-05 253
Document *{ margin:0px; padding:0px; } #d1{ border:1px solid red; width:500px; height:300px; } ul li{ list-style:none; float:left; width:90px; height:20px; text-align:center; bo
JavaScript Tab切换
Hello World ~
07-12 563
实现按钮点击切换 （1）HTML布局 Monday Tuesday Wednesday Life is always so we covered all over with cuts and bruises, but later, the injured area will beco
Javascript特效：tab标签
KaiSarH
12-21 392
知识点 排他思想：有我无他。上面五个li和下面五个li，只有一个可以有class='selected’和display:block 闭包 && 为标签增加我们需要的属性 设置class的时候，必须通过className，不能直接通过class 运行效果 点击不同标签显示不同内容 代码 html <!DOCTYPE html> <html lang="e...
javascript tab切换
Hello,world!
08-14 666
http://www.w3.org/1999/xhtml"> javascript+css tab 切换菜单效果 http://c1.neweggimages.com.cn/WebResources/2009/Default/Css/frame091107.css" />  回到顶部     产品描述   规格参数   包装信息   保修条款
实现暂定滚动的JavaScript TAB标签代码解析
资源摘要信息: "JavaScript实现的可暂定滚动的TAB标签代码" 这段描述所指的资源是一段实现特定功能的JavaScript代码。该代码的功能是创建一个具有标签切换（TAB）的用户界面组件，并且这个组件支持滚动行为的暂停和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值