テンプレートナビゲーションメニューを使用しているときの「現在の」ナビゲーションリンクの強調表示

Question

DreamweaverでHTMLとCSSを使用してコードを作成し、かなりシンプルなサイトを構築しようとしています。視聴者が現在閲覧しているページをナビゲーションメニューで強調したいのですが、これを行う方法はさまざまです。しかし、サイトが進化するにつれて生活を楽にするために、私はナビゲーションメニューをテンプレートの編集不可能な領域にしました。したがって、現在のページリンクを強調表示することができると思われる各ページに対して、コーディングの変更（各リンクに一意のクラスまたは各ページの一意のIDを与えるなど）を行うことができなくなっています。ありがとう！

Answer 1

は、URL内の単語を検出するために、このためにjQueryを使用することができます。

<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に変更すると、黒になります。

各メニュー項目にクラスを与えて、あなたが持っている多くの項目に対して上記のコードを複製します。

もっと動的なやり方がありますが、何百万ものページがない場合は、簡単な方法です。 https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html

テンプレートを編集中にナビゲーション・アイテム・クラスの上にカーソルを置くならば、あなたがして行くことができる：これを行うには

Answer 2

簡単な方法は、あなたが編集可能なタグ属性を持つことができるようにDreamweaverテンプレートの属性であります変更>テンプレート>属性を編集可能にします。

次に、テンプレートに基づいてページを編集するときに、アクティブなクラスを追加することができます。