保持：激活，直到另一个链接被点击 [英] keeping a: active until another link is clicked

问题描述

我有一个链接列表，而不是菜单栏，如

I have a list of links - not a menu bar - as in

<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中点击链接，我不想更改状态）

what I would like to do is have the link selected to stay the hover color until a different link is clicked on in the same window. (page contains iframes but this is top page so i don't want the state to change if a link is clicked on in iframe)

推荐答案

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

HTML: (Added onclick="clickSingleA(this)" and class="single" attributes.)

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

To have one of the links activated by default, just add active class

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

这篇关于保持：激活，直到另一个链接被点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！