javascript - 如何使用链接更改 Css 编码

Question

我想知道是否可以通过链接更改 CSS。我想做的是我想改变它，display:none所以它显示页面并隐藏另一个页面，所以看起来你要去另一个页面，但它已经被加载了。可能吗？

如果可以使用 JavaScript 或 jQuery，我该如何将其放入 HTML 中？

OnClick 可以将 display:none 更改为 display:block 吗？

score 2 · Accepted Answer

我认为你可以使用:target伪类。

你可以这样：

<a href="#books">Show books</a>
<a href="#tv">Show TV</a>

<section id="books"></section>
<section id="tv"></section>

和 CSS：

section {
  display: none;
}

*:target {
  display: block;
}

但我认为，在大多数情况下，使用JavaScript会是更好的解决方案。

编辑：添加了Alexxus建议的通用选择器。

score 2 · Accepted Answer

如果你可以使用 jQuery，那么你可以做一个非常简单的点击事件，如下所示......

<a id="some_link" href="#">click here</a>

$('#some_link').click(function(event){

    event.preventDefault();

    $('#page_two').show();
    $('#page_one').hide();

});

阻止默认设置是为了停止链接重新加载页面。

score 1 · Accepted Answer

您可以使用 jQuery 轻松更改可见性。要隐藏元素，您可以使用hide(). 要使元素可见，您可以使用show().

或者您可以使用toggle()它来简单地切换可见性。

如果您需要更改的不仅仅是元素的可见性，您可以使用 jQuerycss()函数。

或者，您可以使用addClass()andremoveClass()添加或删除元素的 css 类。

score 0 · Accepted Answer

事实上，尽管评论另有说明，但仍有一些方法可以在纯 CSS 中做你想做的事。

最好的技巧是隐藏单选按钮，并将单选按钮的标签作为用户单击的按钮。这可以设置为按钮或选项卡的样式，或者您想要呈现的其他样式。

在您的 CSS 中，您可以使用:checked选择器来切换可见性等。

还有一些其他技术，但这可能是大多数情况下最好的。

我要提出的唯一警告是与旧浏览器可能存在的兼容性问题。如果您需要支持像 IE7 一样旧的浏览器，那么几乎可以肯定的是，您将无法使用任何纯 CSS 技术，而必须依赖 javascript。

这并不是说 javascript 解决方案是一件坏事——您可能会发现它们正是您想要的，特别是如果您想做其他事情，例如在单击按钮时实际加载内容，而不仅仅是切换可见性。单独的 CSS 绝对不会那样做。

希望有帮助。

4 回答 4