jquery - 如何在点击时更改其他列表项的不透明度？

Question

我正在创建一个页面，其中包含可点击元素的列表，这些元素在点击时滚动到 div。我正在寻找一种方法来更改单击时列表项的不透明度，例如，如果您要单击顶部列表项，其他列表项的不透明度会降低

我还希望在用户位于列表项链接到的相应 div 上时突出显示列表项(完全不透明)，以便在用户滚动右侧突出显示列表的图像时列表项改变不透明度滚动时的元素。

有没有人对如何实现这个或任何示例有任何建议？

$("#generationbutton").click(function() {
$('.wrapperright').animate({
    scrollTop: $("#generationanxiety").offset().top},
    1500);
});

这是笔 https://codepen.io/anon/pen/drqWJv

Answer 1

https://codepen.io/anon/pen/pYOrOV

您可以创建一个具有不透明度的类，并在用户单击列表中的元素时将其删除。

$('.bio ul div').addClass('opacity');
$(this).removeClass('opacity');

第一行确保所有 div 都获得不透明度。第二行会将其从您单击的菜单项中删除。

对于滚动部分，您需要使用滚动监听器获取每个 div 的 scrollTop 位置，并在用户到达该点时从中删除不透明度类。