Как изменить цвет ссылки при ее выборе? - PullRequest
Новая
       11

Как изменить цвет ссылки при ее выборе?

2 голосов
/ 02 ноября 2009

Как я могу изменить цвет ссылки после того, как она была выбрана, чтобы она оставалась новым цветом, но только до тех пор, пока не будет выбрана другая ссылка, а затем она изменится обратно. Я новичок. Я нашел эту ссылку Изменение цвета выбранной ссылки, встроенной в таблицу

Но из-за этого мои ссылки перестают работать .... Они меняют цвет, но ни к чему не относятся, а потом, когда я удаляю скрипт, они работают нормально. Что я делаю неправильно / что я должен изменить, чтобы сделать эту работу ??

Спасибо тебе! Сын.

Ответы [ 4 ]

2 голосов
/ 02 ноября 2009

Если вы хотите использовать это, чтобы показать пользователю, какая подстраница на вашем сайте, он / она, вы должны использовать какое-то серверное кодирование (Примеры: PHP, ASP, ASP.NET, Python, Ruby или аналогичный) для присвоения определенного класса элементу, соответствующему текущей странице.

Причина этого заключается в том, что Javascript не может быть сохранен между различными загрузками страниц, поэтому, когда ссылка щелкается и изменяется с помощью Javascript, она сбрасывается при загрузке новой страницы (которую вы только что запросили).

Если ваш сайт состоит из нескольких плоских HTML-страниц, лучше всего вручную добавить классы в нужные пункты меню.

Пример того, как вы можете организовать свое меню:

page1.html 

<ul id="menu">
    <li><a href="page1.html" class="activeSection">Menuitem 1</a></li>
    <li><a href="page2.html">Menuitem 2</a></li>
    <li><a href="page3.html">Menuitem 3</a></li>
    <li><a href="page4.html">Menuitem 4</a></li>
</ul>

page2.html 

<ul id="menu">
    <li><a href="page1.html">Menuitem 1</a></li>
    <li><a href="page2.html" class="activeSection">Menuitem 2</a></li>
    <li><a href="page3.html">Menuitem 3</a></li>
    <li><a href="page4.html">Menuitem 4</a></li>
</ul>

Обратите внимание на положение class="activeSection" - это то, что решает, где применяется CSS, который изменяет внешний вид выбранной страницы.

1 голос
/ 02 ноября 2009

Вы можете удалить «вернуть ложь» из принятого ответа в сообщении, на которое вы ссылаетесь. Имея там «return false», действие ссылки по умолчанию предотвращается.

Я также опубликовал измененную версию кода из оригинального сообщения и принял решение, чтобы избежать зацикливания всех ссылок в документе. 

<head>
<script>
var selectedEl;

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        // Change the last selected element to unselected
        selectedEl.className = 'unselected';
        // Change the selected element to the current element
        selectedEl = el;
        // Change the classname of the selected element to 'selected'
        selectedEl.className = 'selected';
    }
}
</script>
<style>
 .selected { background: #f00; }
</style>
</head>
<body>
    <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
</body>
0 голосов
/ 02 ноября 2009

Используя плагин jQuery Javascript, вы сможете использовать следующий код для достижения желаемого эффекта: 

$("a").click(function()
{
     $("a.clicked").removeClass("clicked")
     $(this).addClass("clicked");
}
0 голосов
/ 02 ноября 2009 
$("a.selector").click(function()
{
    $("a.focused").removeClass('focused');
    $(this).addClass('focused');

    // do other click event stuff...

    return false;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...