Изменение класса с внешними файловыми элементами

У меня есть моя навигация в отдельном файле, который связан с моими регулярными страницами с помощью инструкции <?php require. У меня есть класс на <li> в меню, которое изменит слово на белый, а не на серый. Так Короче у меня есть:Изменение класса с внешними файловыми элементами

<li class="active"> 
    <a href="">Home</a> 
</li> 

<li class=""> 
    <a href="">About</a> 
</li>

Мне нужно изменить класс active, когда каждая страница рассматривается но "", когда она не рассматривается. Я не уверен, как это сделать?

Надеюсь, это имеет смысл.

Update:

Согласно комментариям, я думал, что это было бы хорошей идеей, чтобы очертить то, что я хочу сделать, возможно, немного лучше.

Навигационные сам в отдельный файл с именем navigation.php
Фактические страницы на базе файлов ех: home, about, contact
Когда страница Home просматривается класс active должна быть на <li> этого пункта меню. Когда просматривается страница about, класс должен находиться в этом пункте меню, а класс элементов меню для home должен быть пустым.

источник

2013-07-11 user2371301

Вы можете изменить свойство 'className' соответствующих элементов DOM. Неясно, что вы подразумеваете под «когда просматривается каждая страница». – Pointy

Редактировать сообщение и добавить свой CSS, иначе мы не сможем увидеть полную картину. – nickhar

Вы смотрите на вещи, когда триггеры window.onfocus - используйте манипуляции класса JQuery здесь, что является самым простым способом сделать это.

https://developer.mozilla.org/en-US/docs/Web/API/window.onfocus

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

EDIT: Если я правильно понял ваш проект, у вас есть Navbar со ссылками над IFRAME холдинговых суб-страниц (домашних, о, и т.д.). В этом случае просто привяжите обработчики кликов к div на панели навигации, которые устанавливают и отменят класс и загружают соответствующую страницу в iframe.

источник

2013-07-11 23:47:29 JTravakh

Я ответил на вопрос кодом, который я использовал, чтобы он действительно работал. Но первая ссылка на этот ответ https://developer.mozilla.org/en-US/docs/Web/API/window.onfocus дала мне основу для этого! – user2371301

Это на самом деле очень просто.

Добавить уникальный идентификатор, чтобы каждый из <li> в меню

, а затем использовать JQuery window.onfocus спусковые и поместить этот скрипт на каждой из страниц (домой, о, контакт)

window.onfocus = document.getElementById('indexNav').className=" active";

Изменение идентификатора элемента для соответствия каждой странице.

Так на домашней странице вы бы что-то вроде: indexNav для ID

, а затем на О странице вы бы что-то вроде: aboutNav для ид.

источник

2013-07-11 23:58:25 user2371301

Я думаю, что это то, что вы искали, я проверил его,

<style> 
.active{ 
color:white !important; 
} 
<style> 
<script> 
var links = document.getElementsByTagName('a'); 
for (var i = links.length - 1; i >= 0; i--) { 
    if(links[i].href==this.location) links[i].parentNode.setAttribute('class','color'); 
}; 
</script>

Это dosen't требуют названия ссылок, чтобы иметь те же имена, места.

источник

2013-07-12 00:23:02 lightofsouls

Изменение класса с внешними файловыми элементами

ответ

Смежные вопросы