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

问题描述

原帖:

<a> 标记中的 onclick 是否可以像 href 一样调用锚链接?

Is it possible for onclick within an <a> tag to call an anchor link, just as href does?

在下面的代码段中，我将 <a href="#view"> 应用于所有图像，并且 <a id="close-customlightbox" class="lb-animate" href="#!"> 在从灯箱视图中关闭每个图像后作为返回 URL.

In the snippet below, I have <a href="#view"> applied to all images, and <a id="close-customlightbox" class="lb-animate" href="#!"> as a return URL once each image is closed from lightbox view.

理想情况下，我宁愿让锚提示它们不会对页面的 URL 创建任何类型的扩展.

Ideally, I would rather have the anchors prompted where they would not create any sort of extension to the page's URL.

所以在点击 <a href="#view"> 后，它会像这样添加到页面的 URL:

So after clicking <a href="#view">, it adds on to the page's URL like so:

http://ARANDOMURL.com/page#view

然后一旦关闭灯箱窗口，就会显示 URL:

And then once lightbox window is closed, the URL then displays:

http://ARANDOMURL.com/page#!

然后你必须多次点击浏览器的后退按钮才能返回到实际的上一页...

Then you have to click the browser's back button however many extra times before you can return to the actual previous page...

关于如何实现这一点的任何建议?

Any suggestions on how to achieve this?

最新更新(已解决):

感谢 NetMage 的回答这里:

This is working now, thanks to NetMage's answer here:

$('.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");
});

body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  width: 100%;
}

body.no-scroll {
  overflow: hidden;
}

.pic,
#imgsrc {
  display: inline-block;
}

img {
  width: 100px
}

a {
  display: inline-block;
  line-height: 0;
}

.container {
  display: block;
  width: 100%;
  line-height: 0;
}

.customlightbox {
  top: 0%;
  bottom: 0%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -5;
  opacity: 0;
}

.customlightbox-imgwrap {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.customlightbox img {
  width: auto;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#customlightbox-controls {
  box-sizing: border-box;
  position: fixed;
  height: 50px;
  width: 50px;
  top: -50px;
  right: -3px;
  z-index: 5;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  opacity: .7;
}

#close-customlightbox {
  display: block;
  position: absolute;
  overflow: hidden;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#close-customlightbox:before {
  content: "";
  display: block;
  position: absolute;
  height: 0px;
  width: 2px;
  left: 14px;
  top: 0;
  background: white;
  border-radius: 2px;
}

#close-customlightbox:after {
  content: "";
  display: block;
  position: absolute;
  width: 0px;
  height: 2px;
  top: 14px;
  left: 0;
  background: white;
  border-radius: 2px;
}

.customlightbox.target {
  z-index: 4;
  opacity: 1;
  display: inline-block;
}

.customlightbox.target img {
  opacity: 1;
}

.customlightbox.target~#customlightbox-controls {
  top: -3px;
}

.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
  width: 30px;
}

.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
  height: 30px;
}

.lb-animate {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
  <div class="pic">
    <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
  </div>
</div>

<!-- Lightbox Instance 2 -->
<div class="container">
  <div class="pic">
    <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
  </div>
</div>

<!-- Lightbox Instance 3 -->
<div class="container">
  <div class="pic">
    <img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
  </div>
</div>

<!--lightbox-->
<div class="customlightbox lb-animate" id="view">
  <div class="customlightbox-imgwrap">
    <img class="imgsrc" id="customlightbox-img" src="">
  </div>
</div>
<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate"></a>
</div>

推荐答案

查看您的示例，您似乎正在使用 CSS :target 选择器来处理显示和隐藏灯箱.:target 选择器应用于当前 URL 的目标元素，因此如果您不修改 URL，更改不会生效.

Looking at your sample, it seems you are using the CSS :target selector to handle displaying and hiding the lightbox. The :target selector is applied to the target element of the current URL, so the changes don't take affect if you don't modify the URL.

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

Instead of modifying the URL, change all the :target selectors in your CSS to be .target selectors.

然后，在您的事件处理程序中:

Then, in your event handlers:

$('.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 类被移除，它们消失了.

Now, when you click an image, the CSS style class target is added to the #view element, which causes it to appear, and when you click the Close box, the target class is removed, and they disappear.

您不再需要更改 URL 或 href，因此您可以删除 #view 的锚标记并关闭 onclick 以设置回 #!.

You no longer need to change the URL or href, so you can remove the anchor tags for #view and the close onclick to set back to #!.

新灯箱实例示例:

<!-- 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>

这篇关于是否有替代方法来模拟锚链接/目标伪类的行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！