Подсветка «текущей» навигационной ссылки при использовании меню навигации по шаблону

Question

Я неопытен в кодировании и пытаюсь создать довольно простой сайт с некоторыми HTML и CSS в Dreamweaver. Я хотел бы, чтобы мое меню навигации выделило текущую страницу, на которую смотрит зритель, и я нашел разные способы сделать это. Однако, чтобы сделать жизнь проще по мере развития сайта, я сделал меню навигации неотредактированной областью шаблона. Поэтому я не могу внести изменения в кодировку (например, дать уникальный класс каждой ссылке или уникальный идентификатор тела на каждую страницу) на каждую страницу, которая, казалось бы, позволит мне выделить текущую ссылку на страницу. Благодаря!

Answer 1

Вы можете использовать JQuery для этого, чтобы обнаружить слово в URL:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script> 

    $(document).ready(function($) { 
     if(window.location.href.indexOf("contact") >= 0){ 
       $(".contactLink").addClass("active"); 
     } 
    }); 

</script> 
<style> 
    .active { color: black; font-weight: bold } 
</style> 


<a href="../contact.html" class="contactLink">contact</a> 

Это может добавить класс к пункту меню, который имеет слово «CONTACTLINK» как класс. До тех пор, пока у вас есть этот js на всех страницах (помещайте его в файл, а не жестко закодированный на всех страницах), он будет работать. Если вы скопируете вышеуказанный код на страницу с именем test.html, ссылка будет нормальной. измените имя на contact.html, и оно станет черным.

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

Есть более динамичные способы сделать это, но если у вас нет миллионов страниц, это хороший простой способ.

Answer 2

Простой способ сделать это с помощью атрибутов шаблона Dreamweaver, который позволит вам иметь редактируемые атрибуты тега: https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html

При редактировании шаблона, если вы поместите курсор на класс нав пункт, вы могли бы пойти для изменения> Шаблоны> Редактирование атрибута.

Затем при редактировании страницы на основе шаблона вы сможете добавить активный класс.