如何在网页上制作标签？

Question

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

Answer 1

不要使用jquery :D

容器、变量中包含的数据以及选项卡所需的所有内容

容器是css更改的牺牲品。选项卡将触发更改过程。

如果你有一个静态内容，你可以把它写到一个字符串中，然后简单地从这里加载它。如果您有一个动态生成的内容，则需要创建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

在"tab“周围有一个Javascript标签，并使用onClick来触发一些改变<A href的Javascript。