保持 a：在单击另一个链接之前保持活动状态

Question

我有一个链接列表 - 不是菜单栏 - 就像在

<div align="right"><a href="me1.cfm?pic_ws=80&typ=1" target="mnfrm3">ME1</A></div><br>
<div align="right"><a href="me2.cfm?pic_ws=80&typ=1" target="mnfrm3">ME2</A></div><br>
<div align="right"><a href="me3.cfm?pic_ws=80&typ=1" target="mnfrm3">ME3</A></div><br>

并使用标准 css

a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #C65B05;
}

a:hover   {
  text-decoration: none;
  color: #03B003;
}

我想要做的是选择链接以保持悬停颜色，直到在同一窗口中单击不同的链接。 （页面包含 iframe，但这是首页，所以如果在 iframe 中单击链接，我不希望状态改变）

Answer 1

HTML：（添加了onclick="clickSingleA(this)" 和class="single" 属性。）

要默认激活其中一个链接，只需添加 active 类

<div align="right"><a onclick="clickSingleA(this)" class="single active" href="me1.cfm?pic_ws=80&typ=1" target="mnfrm3">ME1</A></div><br>
<div align="right"><a onclick="clickSingleA(this)" class="single" href="me2.cfm?pic_ws=80&typ=1" target="mnfrm3">ME2</A></div><br>
<div align="right"><a onclick="clickSingleA(this)" class="single" href="me3.cfm?pic_ws=80&typ=1" target="mnfrm3">ME3</A></div><br>

CSS：（添加了 a.active）

a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #C65B05;
}

a:hover, a.active   
{
    text-decoration: none;
    color: #03B003;
}

JavaScript：（激活链接的功能，并删除旧的活动）

function clickSingleA(a)
{
    items = document.querySelectorAll('.single.active');

    if(items.length) 
    {
        items[0].className = 'single';
    }

    a.className = 'single active';
}