如何使用链接更改Css编码

Question

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

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

OnClick可以更改display：none来显示：block？

Answer 1

我认为你可以使用: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;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

上有一些很好的例子

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

修改：添加了类似Alexxus建议的通用选择器。

Answer 2

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

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

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

    event.preventDefault();

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

});

防止默认是停止重新加载页面的链接。

Answer 3

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

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

如果您必须更改元素的可见性以上，则可以使用jQuery css()函数。

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

Answer 4

事实上，尽管评论说不然， 方法可以在纯CSS中做你想做的事。

最好的技巧依赖于隐藏的单选按钮，并将单选按钮的标签作为用户单击的按钮。这可以设置为按钮或标签，或者您想要呈现它。

在CSS中，然后使用:checked选择器切换可见性等。

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

Here's a site that demonstrates it in action and explains it in more detail

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

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

希望有所帮助。