Jquery 是否有替代方法来模拟锚链/目标伪类的行为？

原创帖子：

是否可以在

中单击
onclick
：


$（'.pic>img'）。单击（函数（）{
var srcToCopy=$（this.attr（'src'）；
$（'body'）.find（'imgsrc'）.attr（'src'，srcToCopy）；
$（'body'）.addClass（'no-scroll'）；
$（“#视图”）.addClass（“目标”）；
});
$（'#customlightbox控件'）。在（'单击'，函数（）上）{
$（'body'）.removeClass（'no-scroll'）；
$（“#视图”）.removeClass（“目标”）；
});
正文{
保证金：0；
填充：0；
边界：0；
身高：100%；
宽度：100%；
}
无滚动体{
溢出：隐藏；
}
图，
#imgsrc{
显示：内联块；
}
img{
宽度：100px
}
a{
显示：内联块；
线高：0；
}
.集装箱{
显示：块；
宽度：100%；
线高：0；
}
.定制灯箱{
最高：0%；
底部：0%；
框大小：边框框；
位置：固定；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
z指数：-5；
不透明度：0；
}
.customlightbox imgwrap{
宽度：100%；
身高：100%；
填充：20px；
框大小：边框框；
位置：相对位置；
文本对齐：居中；
}
.定制灯箱img{
宽度：自动；
保证金：自动；
最大宽度：100%；
最大高度：100%；
不透明度：0；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
#自定义lightbox控件{
框大小：边框框；
位置：固定；
高度：50px；
宽度：50px；
顶部：-50px；
右：-3px；
z指数：5；
左边框：2倍纯白；
底部边框：2件纯白；
不透明度：.7；
}
#关闭灯箱{
显示：块；
位置：绝对位置；
溢出：隐藏；
高度：30px；
宽度：30px；
右：10px；
顶部：10px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
#关闭customlightbox:之前{
内容：“；
显示：块；
位置：绝对位置；
高度：0px；
宽度：2倍；
左：14px；
排名：0；
背景：白色；
边界半径：2px；
}
#关闭customlightbox:之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：0px；
高度：2倍；
顶部：14px；
左：0；
背景：白色；
边界半径：2px；
}
.customlightbox.target{
z指数：4；
不透明度：1；
显示：内联块；
}
.customlightbox.target img{
不透明度：1；
}
.customlightbox.target~#customlightbox控件{
顶部：-3px；
}
.customlightbox.target~#customlightbox控件#关闭customlightbox:after{
宽度：30px；
}
.customlightbox.target~#customlightbox控件#关闭customlightbox:before{
高度：30px；
}
.lb动画{
-webkit过渡：0.5s易入易出；
-moz转换：0.5s易入易出；
-ms转换：0.5s易进易出；
-o型过渡：0.5s缓进缓出；
过渡：0.5s缓进缓出；
}
查看您的示例，您似乎正在使用CSS
：target
选择器来处理显示和隐藏lightbox。
：target
选择器应用于当前URL的目标元素，因此如果不修改URL，更改不会生效

不要修改URL，而是将CSS中的所有
：target
选择器更改为
.target
选择器

然后，在事件处理程序中：

$('.pic > img').click(function() {
    var srcToCopy = $(this).attr('src');
    $('body').find('.imgsrc').attr('src', srcToCopy);
    $('body').addClass('no-scroll');
    $('#view').addClass("target");
});

$('#customlightbox-controls').on('click', function() {
    $('body').removeClass('no-scroll');
    $('#view').removeClass("target");
});

现在，当您单击一个图像时，CSS样式类
target
将添加到
#view
元素中，从而使其出现，当您单击关闭框时，
target
类将被删除，它们将消失

您不再需要更改URL或
href
，因此您可以删除
#view
的锚定标记，并单击close onclick以设置回
#

新Lightbox实例示例：

<!-- Lightbox Instance 1 -->
<div class="container">
    <div class="pic">
      <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
    </div>
</div>



更改为关闭灯箱控件：

<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate"></a>
</div>


您的问题非常不清楚，但您可以使用
位置
，@SLaks导航，因此我已删除href并应用
关闭它，但它仍会产生相同的结果…好的。那么我会用
view
替换
anchortag
？当我关闭lightbox窗口时会怎么样？你需要记住你从哪里来并向后滚动-我会存储你单击的元素。我会重新编写我的答案，我知道我了解你在尝试什么。看看你的想法。完成后，你的页面中应该没有
#
。不要从
div
中删除
id=“view”
，请删除引用
视图的锚定标记。我添加了一些示例更改。看起来和我的一样。