Question

不使用Javascript，是否有可能拥有一个锚，即

<a href="#otherlook">

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

修改

请查看fiddle。什么CSS将在选择锚点时实现第二个p标记更改？

Answer 1

这将根据您的示例链接执行您想要的操作。它使用: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

Answer 2

如果您不包含IE6，那么可以通过跨浏览器的安全方式完成：

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

Answer 3

我已经纠正了，可以使用CSS完成。请参阅ThinkingStiff的代码。

~~不，没有JavaScript你就做不到，但它不需要太多工作。~~

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

Answer 4

我用这个link，

HTML：

<a href="#" tabindex="1">Stays colored</a>

CSS：

a {   
    color: black;   
}
    
a:focus {
    color:yellow;
    background-color: red;
}

Answer 5

不，艾德，没有。

但是使用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>

使用锚点击更改页面样式，无需Javascript

5 个答案: