SquareSpace - リンクされているURLにあるナビゲーションバーの画像を変更する方法

Question

この問題を解決するには少し問題があります。

ページの特定のURLにあるときに、上部ナビゲーションバーメニューの画像を別の画像に変更したいと考えています。

例; -

HOME - プロセス - GALLERY - CONTACT

^"プロセス" をクリックすると、それは/プロセスのページにつながる^

私は「プロセスを、それを取得したいです「グレーに黒から画像が変化し、他のすべてが黒のまま、これは基本的に彼らが現在であるページ、エンドユーザーが表示されます - > 『プロセス』

私の現在のサイト：https://alex-vreal.squarespace.com/

これはかなりシンプルかもしれませんが、ちょうどそれを解決するのに不満な時間を持っています。

私はこれをどのように修正することができ、私からあなたが必要とするものを教えてください。

Answer 1

opacityとすることができます。

activeというクラスを、ウェブサイトのページを変更するときにliタグに追加する関数を作成できます。その後、activeクラスには小さなCSSがあります。

以下のチェックこの例を、それが

$(document).ready(function() { 
 
    $('.main-nav li a').click(function(e) { 
 

 
    $('.main-nav li.active').removeClass('active'); 
 

 
    var $parent = $(this).parent(); 
 
    $parent.addClass('active'); 
 
    e.preventDefault(); 
 
    }); 
 
});

.active { 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="main-nav dropdown-hover"> 
 
    <ul data-content-field="navigation"> 
 
    <li class=" external-link active"> 
 
     <a href="#"><img src="http://i.imgur.com/vyvR99Q.png" width="67" height="25"></a> 
 
    </li> 
 
    <li class=" external-link"> 
 
     <a href="#"><img src="http://i.imgur.com/0V4d6mS.png" width="98" height="25"></a> 
 
    </li> 
 
    <li class=" external-link"> 
 
     <a href="#"><img src="http://i.imgur.com/Rb64lhm.png" width="96" height="25"></a> 
 
    </li> 
 
    <li class=" external-link"> 
 
     <a href="#"><img src="http://i.imgur.com/qoHh0d8.png" width="102" height="25"></a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

コード内の画像のURLを変更するのはなぜですか。

それ以外の場合は、JS、css、さらにはPHPを使用して行うことができますが、もっと具体的にする必要があります。

Answer 3

を助け場合は、HOME、プロセス、GALLERY、リスト項目でCONTACT li、その後使用し、

リーを持っている場合は教えてください：アクティブ{背景画像：url（grey.jpg）;}