Изменить цвета тегов <a> с помощью сценария Java

Question

Изменить цвета тегов <a> с помощью сценария Java

0

Я очень новичок в мире UI. Я столкнулся с проблемой на статической странице html.

(Обратите внимание, что мы не используем какие-либо рамки JS в моем проекте, пожалуйста, помогите мне с чистым кодом java-скрипта)

Теперь вот то, что я хочу архивировать, когда я нажимаю на YAHOO, он должен стать оранжевым, а Google & Bing - белым, когда я нажимаю на GOOGLE, он должен стать оранжевым, а Yahoo & bing white, когда я нажимаю BING, должен стать оранжевый цвет и Yahoo & Google белый

1) На моей странице html у меня есть несколько ссылок, например ниже

<a href="www.yahoo.com">Yahoo</a>
<a href="www.google.com">Google</a> 
<a href="www.bing.com">Bing</a>

2) У меня есть один файл CSS, который содержится ниже,

a {text-decoration: none}
a:link, a:visited {text-decoration: none;color: white;}
a:hover {text-decoration: none; color: #FF9900;}

n33rma 28 апр. 2014, в 08:33

Источник

2

ты имеешь ввиду как : active ?
Carsten 28 апр. 2014, в 06:35
0

Google it : используйте document.querySelectorAll([selcetor]) .
Terry 28 апр. 2014, в 06:35
0

Привет, я хочу, чтобы, когда я нажимал на ссылку Yahoo, она сохраняла оранжевый цвет, пока я не нажму любую другую ссылку.
Murtuza Z 28 апр. 2014, в 06:45
0

2 шага В основном создайте класс с именем «нажатый», который определен как оранжевый. Затем, когда вы нажимаете на новую ссылку, js удаляет все экземпляры, где существует класс «нажатых», а затем добавляет его к недавно нажатой ссылке. Это очень элементарно, и вы можете найти в Google точный код, который соответствует этой проблеме. ЕСЛИ ИСПОЛЬЗУЕТСЯ jquery, этот код будет длиной в 1 строку. Очень простой.
ProfileTwist 28 апр. 2014, в 07:27

Показать ещё 2 комментария

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Google it : используйте document.querySelectorAll([selcetor]) .
Привет, я хочу, чтобы, когда я нажимал на ссылку Yahoo, она сохраняла оранжевый цвет, пока я не нажму любую другую ссылку.
2 шага В основном создайте класс с именем «нажатый», который определен как оранжевый. Затем, когда вы нажимаете на новую ссылку, js удаляет все экземпляры, где существует класс «нажатых», а затем добавляет его к недавно нажатой ссылке. Это очень элементарно, и вы можете найти в Google точный код, который соответствует этой проблеме. ЕСЛИ ИСПОЛЬЗУЕТСЯ jquery, этот код будет длиной в 1 строку. Очень простой.

reuelab · Accepted Answer · 2014-04-28T04-03-00.000Z

EDIT: редактируемая функция//Использование PURE JS// ОБНОВЛЕНО FIDDLE

добавьте id и атрибуты onclick для каждой ссылки, например:

<a href="#" id="googleLink" onclick="changeColor(this)">Google</a><br />
<a href="#" id="yahooLink" onclick="changeColor(this)">Yahoo</a><br />
<a href="#" id="bingLink" onclick="changeColor(this)">Bing</a>

измените цвет с помощью функции javascript:

function changeColor(link) {
document.getElementById(link).className = "activeLink";
if(link == "googleLink"){
  document.getElementById("yahooLink").className = "";
  document.getElementById("bingLink").className = "";
   }
if(link == "yahooLink"){
  document.getElementById("googleLink").className = "";
  document.getElementById("bingLink").className = "";
   }
if(link == "bingLink"){
  document.getElementById("googleLink").className = "";
  document.getElementById("yahooLink").className = "";
   }
}

и стиль его использования этого css:

.activeLink{
    color: orange;
}
.activeLink:hover{
    color: orange; // *so the active link would not change color on mouse hover
}

У нас есть ограничение, мы не можем использовать какие-либо рамки или библиотеки. Это должно быть в чистом Javascript.
Обновил мой ответ. Используя чистый JS
@ n33rma Если ответ помог вам решить вашу проблему, и вы можете принять его, а также рассмотреть возможность голосования. Если другие ответы также были полезны, вы также можете проголосовать за них.
@shin: Я пытался проголосовать за ответ, но я получаю уведомление о том, что «для голосования нужно 15 репутаций» :-(
@LOL: Спасибо, я принял ответ прямо сейчас. К вашему сведению: я сегодня создал учетную запись ТАК, поэтому я тоже здесь новичок :-)
Привет, Froient, я заметил, что после того, как я использую эту функцию, зависание перестает работать после первого нажатия на любую ссылку. Какие-либо предложения ?
Привет, n33rma, я обновил свой ответ и, таким образом, демоверсию скрипки .. надеюсь, что это решит проблему :)
Большое спасибо Froient :-), он работает сейчас.