Question

如何在网页上制作标签，以便在标签页上执行点击时，标签会更改css，但在点击页面上也会重新加载并且css会恢复原状。

Answer 1

不要使用jquery：D

您需要容器的所有内容，可变资源中包含的数据以及选项卡

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

如果您有静态内容，可以将其写入字符串，然后只需从中加载即可。如果你有一个dinamically生成的内容，你需要创建一个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。

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

示例：Tabs

如何在网页上制作标签？

4 个答案: