Question

当我点击div中的链接时，我正在尝试更改div的背景颜色，这可行，但我希望链接是一个真正的链接，可能是另一个页面，我似乎无法用现有的码。（我知道这个问题的方式类似，但我的最终结果与其他代码片段有所不同）

 <style>
 #DIVi {padding:20px;}   
 #DIVi:target{background:#CCC}
 </style>

 <div id="DIVi"><a href="#DIVi">This is a link - Click me</a></div>

以上是javascript构思的练习代码片段，它基本上与HTML片段相同，只是“i”（DIVi）是“for”循环中的递增变量。

这是非工作的javascript：

 <script type="text/javascript">
 var i=0;
 function increase(){
   html += '<style>
   #DIV' + i + '{padding:20px;}#DIV' + i + ':target{background:#ccc}        </style><div id="DIV' + i + '"><a href="#DIV' + i + '">This is a link - Click me</a></div>';
   i++;
 }
 </script>

我的问题是“如何使HTML链接成为真正的链接（可能是URL）以及如何在我的javascript示例中使用生成的HTML”？

也许有更好的方法来实现这一目标。这是JSFiddle：http://jsfiddle.net/Rv5qG/23/

Answer 1

可以尝试更简单的JQuery：

$(function() {
    $('a').click( function() {
        $($(this).parent()).css('background-color', '#ccc');
    });
});

参见示例小提琴：http://jsfiddle.net/ddan/Rv5qG/29/

Answer 2

如果您的意思是在href中使用URL（而不是脚本化的onClick），那么当您单击该锚点时，浏览器将导航到您在href中包含的URL并刷新页面（可能完全离开您的站点）

实际上，这会留下你的锚标签以及你可能试图应用的任何可能的样式。

如果该链接是＆＃34; http://www.google.com＆＃34;请考虑这样。你希望你的风格适用于你登陆的页面吗？

您是否希望点击会将浏览器保留在您的网站上，以防止您导航到该网址，因为您希望确保将背景颜色更改为灰色？

您可以更改您捕获和编码的事件的样式，以及您控制和保留在您自己的应用程序中的样式，这只需要一些JavaScript，一些CSS类名称和一些想法。您无法真正改变其他网站的样式，也不应该阻止浏览器的标准浏览器功能/导航，因为这会让人感到困惑。

Answer 3

如果您想使用JavaScript，可以执行以下操作：

<html>
<head>
<style>
#DIVi {padding:20px;}   
#DIVi:target{background:#CCC}
</style></head>

<body>
<div id="DIVi"><a href="#DIVi" onclick="CHANGE()">This is a link - Click me</a></div>

<script>
function CHANGE()
{document.getElementById("DIVi").style.background-color="#ccc"}
</script>

</body></html>

这会在单击链接时将DIVi更改为颜色#ccc。

JSFiddle Here：http://jsfiddle.net/n2cb9v68/

Answer 4

这是一个链接 - 点击mefunction change_color（id）{$（“＃”+ id）.css（'background-color'，“＃ccc”）;}

在链接点击上更改div背景颜色

4 个答案: