时间戳

首页 > 解决方案 > 如何在点击时更改其他列表项的不透明度？

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

问题描述

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

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

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

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

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

标签： jquerycss

解决方案

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

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

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

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

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

推荐阅读