SquareSpace - 如何在导航栏中更改链接时的图像

问题描述：

我在解决此问题时遇到了一些问题。SquareSpace - 如何在导航栏中更改链接时的图像

我想让顶部导航栏菜单中的图像在该页面的特定URL上更改为不同的图像。

例子 -

首页 - 过程 - 画廊 - 联系

^点击时“过程”它导致了/进程页^

我想要得到它，“进程“从黑色图像变为灰色和所有其他人留下的黑色，这基本上会显示他们当前在哪个页面的最终用户 - >‘程序’

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

这可能很简单，但只是有一个令人沮丧的时间解决它。

请让我知道我该如何解决这个问题以及你们需要从我那里得到什么。

答

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

答

你为什么不改变代码中的图片网址？

否则，有很多解决方案可以这样做，使用JS或css甚至PHP，但是您需要更具体地了解您想要做什么。

答

如果你有HOME，工艺，画廊，联系人列表项中li再使用，

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

SquareSpace - 如何在导航栏中更改链接时的图像

相关推荐