更改与锚点击页面的样式，没有JavaScript

是否有可能不使用JavaScript，以便有一个锚即更改与锚点击页面的样式，没有JavaScript

<a href="#otherlook">

选择时要使用额外的CSS。例如，使文字变大，改变颜色？

编辑

请看一看fiddle。什么CSS将实现第二p标签在锚改变被选中？

来源

2012-01-14 Ed Heal

不是在一个跨浏览器安全的方式。 – 2012-01-14 08:58:06

我不知道我明白你的意思！你不能使用这个锚的类吗？ – 2012-01-14 09:00:51

我是为了实现像您可以通过只选择一个＃链接选择完整的网页配色方案。 @Paulo - 请赐教我的非跨浏览器安全方式。 – 2012-01-14 09:26:38

如果不包括IE6，那么是的，它可以在一个跨浏览器安全的方式完成：

a[href="#otherlook"] { styles go here }

来源

2012-01-14 09:35:38 Tyssen

-3

不，埃德，没有。

但使用jQuery应该很直接：

<head> 
    ... 
    <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
    </script> 
    ... 
</head> 
<body> 
... 
<a href="#otherlook" onclick="$('body').addClass('otherlook'); return false;"> 
... 
</body>

来源

2012-01-14 09:36:04

为什么要加载一个巨大的JavaScript库来执行一个简单的操作，而不需要它呢？（我没有downvote你） – kba 2012-01-14 09:47:16

@KristianAntonsen：jQuery是相当普遍的，很可能每个用户已经从谷歌CDN缓存，它的大小应该不重要。后来，如果OP决定使用它的一些funcionality，他不会弄乱jQuery /非jQuery javascript来保护。除非在非常有限的条件下，否则不使用它似乎是愚蠢的。 – 2012-01-14 10:11:54

@PauloScardine除OP之外在问题中明确表示“没有Javascript”。 – ThinkingStiff 2012-01-14 10:20:54

我认错，它可以使用CSS来完成。请参阅ThinkingStiff的代码。

~~不，你不能这样做没有JavaScript，但它并不需要太多的工作。~~

<a href="#otherlook" 
    onClick="document.body.className += ' newColorScheme'">Change colors</a>

来源

2012-01-14 09:43:41 kba

没有足够的jQuery :( – 2012-01-14 09:48:16

这将根据您的示例链接执行您想要的操作。它使用:target伪元素。该href必须要样式元素的id匹配。将要应用于您的段落的样式放入p:target类中。

演示：http://jsfiddle.net/ThinkingStiff/9JVpZ/

HTML：

<a href="#other">Other Look</a> 
<p id="keepnormal">Keep this normal</p> 
<p id="other">This to change on select Other Look</p>

CSS：

p:target { 
    color: red; 
}

输出（点击前）：

enter image description here

输出（点击后）：

enter image description here

来源

2012-01-14 10:24:51 ThinkingStiff

+1。之前从未听说过'：target'，但这在Internet Explorer 8和更早的版本中不起作用，而且它在Safari 2.0及更早版本中有问题。 – kba 2012-01-15 17:49:46

更改与锚点击页面的样式，没有JavaScript

回答

相关问题