ME1
ME2

сохранение: активным, пока не будет нажата другая ссылка

4453 просмотра

1 ответ

У меня есть список ссылок - не строка меню - как в 

<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)

Автор: Andy Источник Размещён: 12.11.2019 09:40

Ответы (1)

2 плюса

Решение

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';
}
Автор: George Garchagudashvili Размещён: 30.08.2014 07:32
Вопросы из категории :
32x32