: Активные ссылки с использованием JavaScript

Question

: Активные ссылки с использованием JavaScript

0

Хорошо, вот моя дилемма. У меня есть файл header.php, содержащий информацию заголовка (навигацию и логотип). Я использую это, чтобы я мог включать файл на каждой моей странице, где это необходимо, и упростить редактирование. Проблема в том, что я, очевидно, не могу использовать: активный цвет или текст ссылок, чтобы пользователь знал, на какой странице они находятся.

Как я могу достичь того, чего хочу, с тем, как я это делаю, или я стараюсь делать это долгий путь. Есть ли javascript, который может это сделать.

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

Markos

user3450887 22 март 2014, в 23:59

Источник

0

Вам нужно будет использовать либо php ( stackoverflow.com/questions/10884624/… ), либо JavaScript ( stackoverflow.com/questions/2397370/… , хотя, к сожалению, это скорее jQuery, а не обычный JS).
David Thomas 22 март 2014, в 22:46

Теги:

php

javascript

html

css

2 ответа

Ещё вопросы

Вам нужно будет использовать либо php ( stackoverflow.com/questions/10884624/… ), либо JavaScript ( stackoverflow.com/questions/2397370/… , хотя, к сожалению, это скорее jQuery, а не обычный JS).

rjanjic · Answer 1 · 2014-03-22T20-01-00.000Z

Я не знаю, как выглядит ваш html, но, например, если у вас включен jQuery, и вы используете абсолютные исправления в ссылках, вы можете использовать что-то вроде этого:

$('a[href="'+document.location.origin+document.location.pathname+'"]').css('color', '#f00');

или если у вас нет jQuery и у вас есть абсолютные ссылки, вы можете использовать что-то вроде этого:

var a = document.getElementsByTagName('a');
for (i in a) { 
 if (a[i].href == document.location.origin+document.location.pathname){
    // red color 
    a[i].style.color = '#900'
 }
}

Что у меня относительно просто. Я не знаю, как разместить свой код здесь, чтобы иметь серое поле, как у вас выше. Но это по сути: <nav> <ul> <li> <a href="index.php"> PageName </a> </ li> </ ul> </ nav> конечно, они в div и там больше страниц, чем один, css сейчас только для зависания, но это не проблема.

hakiko · Answer 2 · 2014-03-22T19-56-00.000Z

Добавьте ниже CSS в свой код. Затем примените класс к тэгам <a>.

1.

/*choose current(active) a tag which has class named niceClass*/
.niceClass a.current {color:red;}

2.

<a href="http://www.example.com"  class="niceClass"> Link Title </a>
<a href="http://www.example.com2" class="niceClass"> Link Title2 </a>
...

Нет. Он хочет стилизовать ссылку, которая указывает на текущую страницу, а не учиться использовать CSS, и CSS, который вы показываете (в отношении селектора), неверен. Подсказка: на этот вопрос нельзя ответить без использования JavaScript или языка на стороне сервера.
Спасибо, я посмотрю на это и попробую применить его. Я отправлю ответ, если смогу что-то собрать, основываясь на том, что я прочитал по ссылке, которую вы разместили.