单击其他超链接时更改超链接颜色

时间:2015-10-05 04:32:38

标签: html css href

如果点击其他链接,如何将超链接颜色更改回原始颜色?超链接的目标是同一页面。

请查看此 DEMO

从上面的例子中你可以看到点击苹果然后点击葡萄/香蕉..两者都变成了相同的颜色,因为(访问过)。单击任何链接时如何使其只有1种颜色(绿色)

3 个答案:

答案 0 :(得分:2)

您可以使用jQuery

执行此操作

$('body a:link').click(function()
{
	$('body a').removeClass('active');
	$(this).addClass('active');	 
});
a:link {
    color: blue;
}

/* visited link */
a.active {
    color: green;
}

/* mouse over link */
a:hover {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="fruit" href="#apple">apple</a></span>
<a class="fruit"  href="#grape">grape</a></span>
<a class="fruit"  href="#banana">banana</a></span>
<div style="height:500px"></div>
<a name="apple"> apple here</a>
<a name="grape"> grape here</a>
<a name="banana"> banana here</a>

答案 1 :(得分:1)

当您定义所有4个状态时,您应该按以下顺序定义它们:

  1. 链接
  2. 访问
  3. 悬停
  4. 有效
  5. 这解决了大约一半的问题。

    a:link { color: blue; }
    a:visited { color: blue; }
    a:hover { color: red; }
    a:active { color: green; }
    

    另一半,让链接变色直到你点击别的东西,更难。以前点击的任何内容都没有内置状态,所以让我们制作一个。

    首先,我们需要jQuery,所以让我们导入它(通过谷歌)。这是HTML的主管:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    </script>
    

    在jfiddle中,你可以通过从左侧的下拉列表中选择jQuery 2.1.4来添加它。

    我们可以通过提供此JavaScript来为链接添加一个类,如果它们是最后点击的链接:

    $(function(){
        $('a').click(function(){
            $('a.lastclicked').removeClass('lastclicked'); //remove class from previous link
            $(this).addClass('lastclicked'); //add class to newly clicked link
        });
    });
    

    最后,让我们调整CSS来进行着色:

    a:link { color: blue; }
    a:visited { color: blue; }
    a:hover { color: red; }
    a:active { color: green; }
    a.lastclicked { color: green; }
    

    如果您希望将悬停颜色应用于上次点击的链接,则可以添加以下行:

    a.lastclicked:hover { color: red; }
    


    您可以在 in a Fiddle here 中看到所有这些内容。

答案 2 :(得分:0)

试试这个(复制并粘贴):

Test.html: -

<html>
 <link rel="stylesheet" type="text/css" href="style.css">
 <a class="fruit" href="#">apple</a></span>
 <a class="fruit"  href="#">grape</a></span>
 <a class="fruit"  href="#">banana</a></span>
 <div style="height:500px"></div>
 <a name="apple"> apple here</a>
 <a name="grape"> grape here</a>
 <a name="banana"> banana here</a>
</html>

style.css中: -

a:link{
 color:blue;
}

a:visited{
 color:purple;
}

a:hover{
 color:orange;
}
a:focus{
color:green;
}

a:active{
 color:red;
}

a:active{
 color:yellow;
}