保持一个:活动直到另一个链接被点击 [英] 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: (Added onclick="clickSingleA(this)" and class="single" 属性.)

要默认激活链接之一，只需添加 active 类

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:(添加了一个.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屋！