65.9K
CodeProject 正在变化。 阅读更多。
Home

简单的 JavaScript 选项卡界面

BlueSkyCoder
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2016年4月12日

CPOL

5分钟阅读

viewsIcon

12898

downloadIcon

179

提供了一个用 JavaScript 和 CSS 实现的骨架式选项卡浏览器界面， 支持选项卡内容缩放和打印格式设置。

引言

我最近决定将几个基于 Java 的应用程序转换为 ASP.NET Web 应用程序，而这些应用程序的输出特性表明，选项卡式界面会很有效。搜索用于选项卡式浏览器界面的示例，我找到了许多基于 HTML/CSS/JavaScript 的解决方案：有些非常巧妙，有些则展示了优雅的 CSS 用法。由于我的转换需要将 C# aspx 代码与 HTML 集成，我正在寻找一个尽可能简单透明的解决方案，仅支持我的应用程序所需的功能。最终，我认为自己动手开发一种方法来获得易于与所需的服务器端 C# 代码集成的代码是值得的，本文将介绍我解决方案的框架。它使用大约 75 行 HTML、JavaScript 和 CSS 提供了一个选项卡式界面，支持每个选项卡中可调整大小的带边框输出，并允许在输出跨越多页时打印每个选项卡的内​​容。此选项卡式界面需要 JavaScript，并且它不会优雅地降级到不支持 JavaScript 的浏览器。

下面是演示输出的外观

背景

典型的选项卡式界面实现一个 HTML 定义的选择器，例如链接的无序列表或单选按钮组，然后使用 CSS 将这些选择样式化为选项卡。与每个选项卡关联的内​​容包含在一个 div 中，该 div 被样式化为显示或隐藏，具体取决于每个选项卡是选中还是取消选中。实现的 JavaScript 代码通过更改每个选项卡和 div 的样式来响应单击选项卡。

Using the Code

我们将首先查看 HTML body，然后是 JavaScript 和 CSS 组件。

每个选项卡由“tabSelect”无序列表中的列表项中的链接定义，以及一个 div，该 div 必须具有“tabs”的“class”值和一个唯一的 id。实际的选项卡内​​容将替换“Tab n content goes here”文本。要添加选项卡，请将一个 li 添加到无序列表中，其中包含适当的 showTab(n) 函数调用和 tab 标签，并将一个 div 添加到“tabs”类值的 div 集合中的相应（第 n 个）位置。

在每个“tabs”类中的“Tab x content goes here”div 之后定义的按钮的可选语句支持在单击“Printer Friendly Format”按钮时，通过浏览器重新格式化每个选项卡的内​​容。所有选项卡的内​​容都位于单个 HTML 文件中，因此使用浏览器的打印功能无法直接打印单个选项卡的内​​容而不进行重新格式化。查看“Printer Friendly Format”后单击后退按钮将恢复选项卡式界面。嵌套的 div 允许提取选项卡的内​​容，而无需 HTML 定义“Printer Friendly Format”按钮。

<ul id="tabSelect">
    <li><a href="#" onclick="showTab(0);" 
    class="tablinks">This is tab0 label</a></li>
    <li><a href="#" onclick="showTab(1);" 
    class="tablinks">This is tab1 label</a></li>
</ul>

<div class="tabs" id="tab0Content">
    <div id="tab0HTML">
        Tab 0 content goes here
    </div>
    <p><input type="button" 
    value="Printer Friendly Format" 
    onclick="printFormat(tab0HTML);"></p>
</div>

<div class="tabs" id="tab1Content">
    <div id="tab1HTML">
        Tab 1 content goes here
    </div>
    <p><input type="button" 
    value="Printer Friendly Format" 
    onclick="printFormat(tab1HTML);"></p>
 </div>

body 标签定义了页面加载时（选择最左侧的选项卡）和大小调整时（重新定义边框并重新选择调整大小时处于活动状态的选项卡）要执行的操作。

<body onload="showTab(0);" onresize="resizeFlag=true;showTab(lastTabSelected);">

JavaScript showTab(n) 函数有一个参数（要激活的选项卡），用于调用控制选项卡式输出外观的样式更改。首次调用时，该函数将设置标识链接和 div 的数组，并确定已定义的选项卡数量。

接下来，函数会遍历链接和 div，使用 setAttribute 函数和样式属性将它们样式化为活动或非活动状态。选定选项卡链接样式中的 background-color 应与 div.tabs 选择器 style 部分中指定的 background-color 匹配。请注意，选定选项卡的底部填充略大于未选定选项卡（.41em vs. .3em）。这导致选定选项卡的选项卡颜色覆盖选项卡的边框，将选项卡与选项卡内容连接起来。有效的值取决于浏览器，但 .41 似乎是一个不错的折衷。

最后，如果 resizeFlag 为 true，则 div 的尺寸会调整以适应浏览器窗口尺寸的变化。这允许调整边框大小。

printFormat(id) 函数使用 innerHTML 属性提取与单个选项卡关联的 HTML 代码（通过其 id 标识），然后将其显示在一个新窗口中，该窗口可以使用浏览器的打印功能进行打印。此 Web 输出不包含选项卡、边框和“Printer Friendly Format”按钮。可以使用浏览器的后退按钮返回到选项卡式输出。

var links = new Array();
var divs = new Array();
var tabCount;
var lastTabSelected = -1;
var resizeFlag = true; //resize divs when true
function showTab(selectedTab) {
    if (lastTabSelected == -1) { //use -1 as init flag
        links = document.getElementsByClassName
        ("tablinks"); //links must have class name "tablinks"
        divs = document.getElementsByClassName("tabs"); //divs must have class name "tabs"
        tabCount = Math.min(links.length, divs.length); //should be equal counts
    }
    for (var i = 0; i < tabCount; i++) {
        if (i == selectedTab) {
            //Select this tab by changing the style
            links[i].setAttribute("style",
                "background-color: yellow; 
                font-weight: bold; padding: 0.3em 0.3em 0.41em 0.3em;");
            divs[i].style.display = "";
        } else {
            //Deselect the inactive tabs by changing the style
            links[i].setAttribute("style",
                "background-color: lightgray; 
                font-weight: normal; padding: 0.3em 0.3em 0.3em 0.3em;");
            divs[i].style.display = "none";
        }
        if (resizeFlag) {
            divs[i].style.height = (window.innerHeight - 60) + "px";
            divs[i].style.width = (window.innerWidth - 30) + "px";
        }
    }
    lastTabSelected = selectedTab; //to redisplay active tab after resize event
    resizeFlag = false;
} //showTab()
    
function printFormat(tabId) {
    var htmlStr = "<!DOCTYPE html><html><body>" + 
    tabId.innerHTML + "</body></html>";
    document.open(); document.write(htmlStr); document.close();
} //printFormat()

style 部分定义了选项卡和内容区域外观的静态方面。请注意，hover 伪类使用了 !important 选项，以提高鼠标悬停时选项卡颜色的优先级。如果未标记，showTab(n) 函数中指定的颜色将优先。

div.tabs 样式中指定的背景颜色应与 showTab(n) 函数中为活动选项卡指定的颜色匹配。

在 div.tabs 样式定义中设置 overflow: auto 会在选项卡内​​容溢出带边框的显示区域时自动提供滚动条。

ul#tabSelect li { display: inline; }
ul#tabSelect { list-style-type: none; margin: 15px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabSelect li a { color: black; border: 1px solid black; border-bottom: none; 
text-decoration: none; border-top-left-radius: .5em; border-top-right-radius: .5em;  }
ul#tabSelect li a:hover { background-color: lightblue!important; }
div.tabs { border: 1px solid black; padding: 5px; overflow: auto; background-color: yellow; }

鸣谢

虽然通过网络搜索可以找到许多构建选项卡式网页界面的方法，并且通过搜索“如何在 HTML 页面中创建选项卡”等主题找到的示例有很多值得学习的地方，但我将在此提到（并提供链接）我发现特别有趣和/或有用的几个。

我的示例所代表的方法最受 elated.com 上这篇关于 JavaScript 选项卡的文章影响。该文章比我的代码复杂一些，但确实声称在 JavaScript 不可用时能够优雅地降级。

我将之归类为巧妙/优雅类解决方案的另一种方法是 css-tricks.com 上的这篇。它使用单选按钮作为选项卡选择器，并且完全通过 CSS 实现：没有 JavaScript。这篇文章还提供了指向提供选项卡式内容的几种其他方法的链接。

关注点

下面是一个将选项卡代码集成到 ASP.NET ID3 规则归纳应用程序中的示例。该应用程序的早期版本可在此处访问：运行 e2gRuleInduction id3 应用程序。在此应用程序中，每个选项卡中显示的输出是通过调用服务器端 C# 组件中的方法来在运行时生成的。

© . All rights reserved.