javascript的tab标签

关注

转载最新推荐文章于 2026-03-01 00:10:01 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

Bootstrap插件（三）——标签页导航（tab.js）之前讲组件的时候有讲到tab普通式和胶囊式标签页，但是都只是讲解一些静态的布局，并没有加入动态的交互效果，这一篇文章将根据一个代码示例来学习，标签导航与所对应内容的联动。想来看一下具体实现的动态效果：效果就像上面，当点击tab选项的时候切换对应的内容，下面是实现的代码: 阅读详情

这个是一篇原理性的文章

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">

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

/*设置超链接样式*/

{

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;

}

{

font-size:9pt;

margin-left:20pt;

}

</style>

<!--

//显示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>

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

</div>

<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>

</form>

</body>

</html>

收录于

标签

#javascript #tabs #class #div #xhtml

实现淡入淡出TAB标签效果的JavaScript源码解析 TAB标签页，也常简称为标签页，是一种用户界面设计元素，它允许多个内容区域共用一个窗口空间，用户通过点击不同的标签来切换视图。这种设计减少了界面的混乱程度，提高了内容的组织性，是管理复杂信息的有效方式。在用户界面设计中，标签页的设计需要遵循一致性原则，即每个标签的大小、位置和视觉样式都应保持一致，以帮助用户快速识别和使用。标签通常位于内容区域的顶部，紧邻内容显示区，使得用户在切换标签时，能够立即关注到新内容的加载。阅读详情

javascript的tab标签

相关推荐