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 {
    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';
}

保持：激活，直到单击另一个链接

1 个答案: