是否有另一种方法来模仿锚链接/目标伪类的行为？ [英] Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?

查看：65
本文介绍了是否有另一种方法来模仿锚链接/目标伪类的行为？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



onclick 可能在< a> 标签来调用一个锚链接，就像 href 一样吗？



在下面的代码片段中，我已将< a href =＃view> 应用于所有图像，并且<一旦每个图片从灯箱视图中关闭，一个id =close-customlightboxclass =lb-animatehref =＃！> 作为返回URL



理想情况下，我宁愿让锚点提示他们不会在页面的URL中创建任何类型的扩展。

因此，点击 b
code>< a href =＃view> ，它会添加到页面的网址中，如下所示：

http://arandomurl.com/page#view



然后，一旦关闭了窗口，窗口就会显示：



http://ARANDOMURL.com/page#！



然后，您必须单击浏览器的后退按钮，然后再加上许多次n返回到实际的上一页...



有关如何实现此目的的任何建议？

最新更新（已解决）：



现在这个工作正常，感谢NetMage的回答这里：



$（'。图片> （'.rcg'）。attr（'src'，srcToCopy）; $（'。imgs'）。click（function（）{var srcToCopy = $（this）.attr（'src'）; $（'body'）。 （'body'）。addClass（'no-scroll'）; $（'＃view'）。addClass（target）;}）; $（'＃customlightbox-controls'）。 （）{$（'body'）。removeClass（'no-scroll'）; $（'＃view'）。removeClass（target）;}）;

body {margin：0;填充：0; border：0;身高：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;宽度：100％; line-height：0;}。customlightbox {top：0％;底部：0％;盒子尺寸：边框;位置：固定;左：0;正确：0;背景：rgba（0，0，0，0.7）; z-index：-5; opacity：0;}。customlightbox-imgwrap {width：100％;身高：100％; padding：20px;盒子尺寸：边框;位置：相对; text-align：center;}。customlightbox img {width：auto;保证金：汽车;最大宽度：100％;最大高度：100％;不透明度：0;位置：相对;顶部：50％; transform：translateY（-50％）;}＃customlightbox-controls {box-sizing：border-box;位置：固定; height：50px;宽度：50px;顶部：-50px; right：-3px; z-index：5; border-left：2px纯白色; border-bottom：2px纯白色;不透明度：.7;}＃close-customlightbox {display：block;位置：绝对;溢出：隐藏; height：30px;宽度：30px;右：10px;顶部：10px; -webkit-transform：rotate（45deg）; -moz-transform：旋转（45deg）; -ms-transform：rotate（45deg）; -o-transform：旋转（45deg）; transform：rotate（45deg）;}＃close-customlightbox：before {content：;显示：块;位置：绝对; height：0px; width：2px; left：14px; top：0;背景：白色; border-radius：2px;}＃close-customlightbox：after {content：;显示：块;位置：绝对; width：0px; height：2px;顶部：14px;左：0;背景：白色; border-radius：2px;}。customlightbox.target {z-index：4;不透明度：1; customlightbox.target img {opacity：1;}。customlightbox.target〜＃customlightbox-controls {top：-3px;}。customlightbox.target〜＃customlightbox-controls＃close-customlightbox：after { customlightbox.target〜＃customlightbox-controls＃close-customlightbox：before {height：30px;}。lb-animate {-webkit-transition：0.5s ease-in-out; -moz-transition：0.5s缓出; -ms-transition：0.5s缓出;转型：0.5秒缓出; 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-animateid =view> < div class =customlightbox-imgwrap> < img class =imgsrcid =customlightbox-imgsrc => < / div>< / div>< div id =customlightbox-controlsclass =lb-animate> < a id =close-customlightboxclass =lb-animate>< / a>< / div>

解决方案

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



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

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

 <$ c点击（功能（）{
 var srcToCopy = $（this）.attr（'src'）; 
 $（'body'）。$ c $（'。pic> img'）。 find（'。imgsrc'）。attr（'src'，srcToCopy）; 
 $（'body'）。addClass（'no-scroll'）; 
 $（'＃view'）。addClass （目标）; 
}）; $（'＃custom-box-controls'）。on（'click'，function（）{
 $（'body'）。removeClass（'no-scroll'）; 
 $（'＃view'）。removeClass（target）; 
}）;

现在，当您点击图片时，CSS样式类 target 被添加到 #view 元素中，这会导致它出现，并且当您单击关闭框时，目标 code> class被移除，并且它们消失。



您不再需要更改URL或 href ，因此您可以移除 #view 的定位标记，并关闭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-controlsclass =lb-animate> 
< a id =close-customlightboxclass =lb-animate>< / a> 
< / div>


Original Post:

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

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.

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

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

http://ARANDOMURL.com/page#view

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?

Latest Update (Resolved):

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>

解决方案

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.

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");
});

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.

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

Sample new Lightbox instance:

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

Change to close lightbox control:

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

这篇关于是否有另一种方法来模仿锚链接/目标伪类的行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆