SquareSpace - 如何在導航欄中更改鏈接時的圖像

我在解決此問題時遇到了一些問題。SquareSpace - 如何在導航欄中更改鏈接時的圖像

我想讓頂部導航欄菜單中的圖像在該頁面的特定URL上更改爲不同的圖像。

例子 -

首頁 - 過程 - 畫廊 - 聯繫

^點擊時「過程」它導致了/進程頁^

我想要得到它，「進程「從黑色圖像變爲灰色和所有其他人留下的黑色，這基本上會顯示他們當前在哪個頁面的最終用戶 - >‘程序’

我目前的網站：https://alex-vreal.squarespace.com/

這可能很簡單，但只是有一個令人沮喪的時間解決它。

請讓我知道我該如何解決這個問題以及你們需要從我那裏得到什麼。

來源

2017-08-31 Alex Vreal

您可以使用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>

來源

2017-08-31 10:33:34

你爲什麼不改變代碼中的圖片網址？

否則，有很多解決方案可以這樣做，使用JS或css甚至PHP，但是您需要更具體地瞭解您想要做什麼。

來源

2017-08-31 10:31:43 Crssss

如果你有HOME，工藝，畫廊，聯繫人列表項中li再使用，

李： active {background-image：url（grey.jpg）;}

來源

2017-08-31 11:07:21

SquareSpace - 如何在導航欄中更改鏈接時的圖像

回答

相關問題