如何在网页上制作标签？

Question

如何在网页上制作选项卡，以便在单击选项卡时，选项卡的 css 发生变化，但在单击页面上也会重新加载，并且 css 恢复为原始状态。

Answer 1

不要使用 jquery :D

您需要的所有内容都是容器、变量中包含的数据和选项卡

容器是 CSS 更改的受害者。 选项卡将触发更改过程。

如果你有静态内容，你可以将其写入字符串，然后简单地从 this 加载它。 如果您有动态生成的内容，则需要创建ajax请求来获取新内容，然后将其存储在同一字符串中等待加载。

使用选项卡，您可以创建可用于内容加载的通用功能。

function load(data) {
    document.getElementById("victim").innerHTML = data;
}

function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";

element.style.background = "#f0f";
}

静态内容的触发器：

document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};

如果你想更改CSS，你需要另一个函数来进行更改。

我告诉你不要使用jquery，因为你不会知道你在做什么。

但这整个代码可以用 jquery 替换，如下所示：

$("tab1").click(function(e) {
    $("#tab1 | #tab2").each(function() {
    $(this).css("background","#fff"); });
    $(this).css("background","#00f");
    $("#victim").append("static content 1");
});


$("tab12click(function(e) {
    $("#tab1 | #tab2").each(function() {
    $(this).css("background","#fff"); });
    $(this).css("background","#00f");
    $("#victim").append("static content 2");
});

如果你知道 javascript 是如何工作的，那么 jquery 就没有任何问题，但我看到越来越多的人只想让他们的网站非常快速和简单，但不知道他们在做什么并遇到同样的问题一次又一次。

Answer 2

Jquery UI 选项卡：

http://jqueryui.com/demos/tabs/

Answer 3

在“选项卡”周围有一个

<A href

标签，并使用 onClick 来触发一些更改 CSS 的 Javascript。

Answer 4

如果您不想使用 Jquery 创建 UI 选项卡，请参阅我的跨浏览器 JavaScript 代码：GitHub。

• 您可以使用不同的方式来创建选项卡和选项卡内容。
• 只有当选项卡获得焦点时才能添加选项卡内容。
• 您可以记住所选的选项卡。打开页面后，所选选项卡立即打开。
• 您可以在选项卡内创建选项卡。
• 可自定义选项卡背景。

示例：选项卡

Answer 5

我注意到了这个问题，并想为尽可能多的人一劳永逸地解决它。我制作了一个库，用于在 JavaScript 中添加、操作、自定义和删除选项卡。该库只是一个包含您需要的一切的文件。我不想让响应变得又长又无聊，因此，为了查看文档，在引用文件后，只需调用

showDocumentation()

，并且为了查看函数及其所需参数的列表，请调用

showListFunctions()

。我确信这两种方法是您开始使用它所需要的全部。我现在将继续提供向容器添加可滑动选项卡的示例。库中有添加其他类型选项卡的方法，我在函数列表和文档中提供了信息。可滑动选项卡的示例如下：

<!--Referencing the script first-->
<script type="text/javascript" src="https://anville95work.github.io/scripts/JavaScriptTabsLibrary.js"></script>
<style>
    #sampleContainerElement{
        display: table;
        height: 50vh;
        width: 50vw;
        margin: 2vh auto;
        border: solid 1px gold;
        border-radius: 2vh;
    }
</style>
<div id="sampleContainerElement">
    <!--This is the container view. Container view must be empty and must not be modified directly-->
</div>
<script>
    let firstTab = document.createElement("div");
    firstTab.innerHTML = "firstTab";
    firstTab.style.textAlign = "center";
    firstTab.style.color="white";
    let secondTab = document.createElement("div");
    secondTab.innerHTML = "secondTab";
    secondTab.style.textAlign = "center";
    secondTab.style.color="white";
    let thirdTab = document.createElement("div");
    thirdTab.innerHTML = "thirdTab";
    thirdTab.style.textAlign = "center";
    thirdTab.style.color="white";
    let fourthTab = document.createElement("div");
    fourthTab.innerHTML = "fourthTab";
    fourthTab.style.textAlign = "center";
    fourthTab.style.color="white";
    let fifthTab = document.createElement("div");
    fifthTab.innerHTML = "fifthTab";
    fifthTab.style.textAlign = "center";
    fifthTab.style.color="white";
    let sixthTab = document.createElement("div");
    sixthTab.innerHTML = "sixthTab";
    sixthTab.style.textAlign = "center";
    sixthTab.style.color="white";

    let tabsObjectsArray = {
        length: 6,
        0: firstTab,
        1: secondTab,
        2: thirdTab,
        3: fourthTab,
        4: fifthTab,
        5: sixthTab
    }

    let tabNamesArray = {
        length: 6,
        0: "TAB_1",
        1: "TAB_2",
        2: "TAB_3",
        3: "TAB_4",
        4: "TAB_5",
        5: "TAB_6"
    }

    addNonSwipableTabs("sampleContainerElement", tabsObjectsArray, tabNamesArray);
</script>

感谢您的阅读，祝您编码愉快。