GFNS, Webdesign. JS трюки

Выводим линк на текущий пункт меню и его подраздел другим цветом

Автор - Sergej Qkowlew
скачать active.js размером 1017 байт
Главная страница сайта
Подраздел сайта в котором лежит эта страница
Текущая страница

Зачем это нужно

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

Как добавить скрипт на сайт

  1. Залейте файл active.js в подкаталог /js/ Вашего сайта
  2. Скопируйте нижеприведённый текст в html файл вашего сайта перед </header>
  3. Добавьте в стилевой файл вашего сайта строки с желаемым отличием цветов и оформления выделенных пунктов меню:
    .active { color: grey; background: white; }
    .subactive { color: red; background: yellow; }
    
  4. Отрефрешьте страницу своего сайта в любимом браусере
// (x) 2018 Sergej Qkowlew Public domain Сергей Яковлев написал сие для всех.
// .active class for a of current page,  Ставит текущему линку класс  .active
// .subactive css class for  a  'upper'  Линку на подраздел ставит .subactive
// link detected by pathname structure.  (подраздел по структуре пути в URI).

window.addEventListener('load', function(){
if (window.location.pathname != '/') {
 SqAct=window.location.href ;
 SqLen=window.location.href.length ;
 SqSub=window.location.href.substring(0, window.location.href.lastIndexOf('/')+1);
 if (SqSub == SqAct) {
  SqSub = SqAct.substring(0,SqAct.lastIndexOf('/', SqLen-2)+1);
  }
 SqAs=document.getElementsByTagName('A');
 for (i=0; i<SqAs.length; i++) {
    if (SqAs[i].href == SqAct) {
        SqAs[i].classList.add("active");
        }
    if (SqAs[i].href == SqSub) {
        SqAs[i].classList.add("subactive");
	}
    }
 }
}, false) // end window.onload