HTML & CSS 基础知识_Tab页

最新推荐文章于 2024-06-11 16:58:39 发布

原创最新推荐文章于 2024-06-11 16:58:39 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

CSS 同时被 2 个专栏收录

1 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文详细介绍了如何使用 HTML 和 CSS 实现 Tab 页功能，包括 HTML 结构、CSS 样式以及 JavaScript 交互逻辑。通过实例演示，帮助开发者轻松掌握 Tab 页的前端实现。

这里演示如何使用 HTML 和 CSS 实现 Tab 页的效果。

1. HTML 内容如下, 包含3个Tab页, 分别为Tab_1, Tab_2, Tab_3

<ul id="tabList">
    <li><a href="#" tabId="tab_1">Tab_1</a></li>
    <li><a href="#" tabId="tab_2">Tab_2</a></li>
    <li><a href="#" tabId="tab_3">Tab_3</a></li>
</ul>
<div id="tabContents">
    <div id="tab_1">This is tab1 page.</div>
    <div id="tab_2">This is tab2 page.</div>
    <div id="tab_3">This is tab3 page.</div>
</div>

2. CSS 样式如下：

<style type="text/css">
#tabList {
    margin-bottom: 0px;               /* 将 tab 头的下边距设置为0 */
}
#tabList li {
    display: inline;                  /* 将 li 元素由纵向排列修改为横向排列 */
}
#tabList li a {
    border: 1px solid #66BBE8;        /* 给 a 元素添加边框 */
    padding: 3px 50px;                /* 设置 a 元素的内边距 */
}
#tabList li a:link, #tabList li a:visited {
    color: #0000F0;                   /* 设置超链接的颜色 */
    text-decoration: none;            /* 去掉超链接的下划线 */
}
#tabList li a.linkSelected {
    font-size: 120%;                  /* 选中时字体增大 */
    padding-top: 5px;                 /* 选中时上边距增大到5px */
    background: #FFFFFF;              /* 选中时的背景颜色 */
    border-bottom: none;              /* 取消下边框 */
}
#tabList li a.linkUnselected {
    background: #DFE8F6;              /* 未选中时的背景颜色 */
    border-bottom: 1px solid #DFE8F6; /* 未选中时的下边框 */
}
#tabContents {
    padding: 10px 20px;               /* tab 页内容的内边距 */
    border-top: 1px solid #66BBE8;    /* tab 页内容的上边距 */
}
</style>

3. javascript 代码如下：

<script type="text/javascript">
var tabLinks = null;
function initTabs(tabListId, selectedTabId) {
    tabLinks = document.getElementById(tabListId).getElementsByTagName("a");
    var link, tabId, tab;
    for (var i = 0; i < tabLinks.length; i++) {
        link = tabLinks[i];
        tabId = link.getAttribute("tabId");
        tab = document.getElementById(tabId);
        if (tabId == selectedTabId) {
            tab.style.display = "block";
            link.className = "linkSelected";
        } else {
            tab.style.display = "none";
            link.className = "linkUnselected";
        }
        link.onclick = function() {
            var currTabId = this.getAttribute("tabId");
            var tmpLink, tmpTabId, tmpTab;
            for (var j = 0; j < tabLinks.length; j++) {
                tmpLink = tabLinks[j];
                tmpTabId = tmpLink.getAttribute("tabId");
                tmpTab = document.getElementById(tmpTabId);
                if (currTabId == tmpTabId) {
                    tmpTab.style.display = "block";
                    tmpLink.className = "linkSelected";
                } else {
                    tmpTab.style.display = "none";
                    tmpLink.className = "linkUnselected";
                }
            }// end for
        }; // end onclick 
    } // end for 
}
initTabs("tabList", "tab_2");
</script>

4. 效果如下：