Tab标签

最新推荐文章于 2023-04-23 14:58:30 发布

Canyoung

最新推荐文章于 2023-04-23 14:58:30 发布

阅读量2.3k

点赞数

分类专栏： HTML 文章标签： dreamweaver stylesheet html function xhtml javascript

本文链接：https://blog.csdn.net/Canyoung/article/details/5945420

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在WEB开发的过程中，很多时候会用到如下的Tab标签，如下图；有时候我们可以使用DreamWeaver很方便地添加，也可以使用其他的方式生成，不管用什么样的方式，其本质也都是使用JavaScript、css等对HTML标签的操作；下面就给出一个实例来说明Tab标签的制作。

准备好tabs.js代码，该js代码定义了Tab中的所有操作（将下列代码直接复制到tabs.js中即可）：
function Tabs() { } Tabs.init = function(tabListId) { Tabs.tabLinks = document.getElementById(tabListId).getElementsByTagName("A"); var link, tabId, tab; for (var i = 0; i < Tabs.tabLinks.length; i++) { link = Tabs.tabLinks[i]; tabId = link.getAttribute("tabId"); if (!tabId) alert("Expand link does not have a tabId element: " + link.innerHTML); tab = document.getElementById(tabId); if (!tab) alert("tabId does not exist: " + tabId); if (i == 0) { tab.style.display = "block"; link.className = "linkSelected " ;//+ link.className.replace(Tabs.removeUnselectedRegex, ''); } else { tab.style.display = "none"; link.className = "linkUnselected " ;//+ link.className.replace(Tabs.removeSelectedRegex, ''); } link.onclick = function() { var tabId = this.getAttribute("tabId"); for (var i = 0; i < Tabs.tabLinks.length; i++) { var link = Tabs.tabLinks[i]; var loopId = link.getAttribute("tabId"); if (loopId == tabId) { document.getElementById(loopId).style.display = "block"; link.className = "linkSelected " ;//+ link.className.replace(Tabs.removeUnselectedRegex, ''); } else { document.getElementById(loopId).style.display = "none"; link.className = "linkUnselected " ;//+ link.className.replace(Tabs.removeSelectedRegex, ''); } } if (this.blur) this.blur(); return false; } } }
样式表tabs.css，该文件主要是定义了Tab在页面上的显示形式(通俗地讲，就是给Tab化妆)：
#tabList { padding:3px 20px; margin:0.1em 0 0 0; line-height:1em; } #tabList li { list-style:none; display:inline; margin:0; } #tabList li a { border:1px solid #bbb; padding:3px 0.5em; margin:0px; -moz-border-radius-topleft:7px; -moz-border-radius-topright:7px; } #tabList li a.linkSelected { background:#fff; border-bottom:2px solid white; padding-top:5px; font-size:110%; } #tabList li a.linkUnselected { background:#eee; border-bottom:1px solid #eee; } #tabList li a:link, #tablist li a:visited { color:navy; text-decoration:none; } /* Insert height/width here to give all the content a unified size */ #tabContents { padding:20px; border-top:1px solid #BBCCDD; } .tabcontent { display:none; } #tabList li.tabInvisible { display:none; }
在HTML文档tab.html中的代码如下：
<!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> <title>Tabs</title> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <mce:script type='text/javascript' src="../tabs/tabs.js" mce_src="tabs/tabs.js"></mce:script> <link rel="stylesheet" type="text/css" href="../tabs/tabs.css" mce_href="tabs/tabs.css" /> </head> <body οnlοad="Tabs.init('tabList', 'tabContents');"> <ul id="tabList"> <li><a href="#" mce_href="#" tabId="demoDiv">TabA</a></li> <li><a href="#" mce_href="#" tabId="explainDiv">TabB</a></li> </ul> <div id="tabContents"> <div id="demoDiv"> <p>TabA Content</p> </div> <div id="explainDiv"> <p>TabB Content</p> </div> </div> </body> </html>

Canyoung

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Tab标签

在WEB开发的过程中，很多时候会用到如下的Tab标签，如下图；有时候我们可以使用DreamWeaver很方便地添加，也可以使用其他的方式生成，不管用什么样的方式，其本质也都是使用JavaScript、css等对HTML标签的操作；下面就给出一个实例来说明Tab标签的制作。准备好tabs.js代码，该js代码定义了Tab中的所有操作（将下列代码直接复制到tabs.js中即可）：function Tabs() { }Tabs.init = function(tabListId) { Tabs.ta
复制链接

扫一扫

专栏目录