[英]Menu has “scroll to #href” function, BUT unable to use _target blank links there
My problem is that my navbar has scroll to link function, because my site is in one page. 我的问题是我的导航栏具有滚动链接功能,因为我的网站位于一页内。
But I tried to add a new link to menu, with an external link (not in the same page). 但是我尝试向菜单添加一个新链接,并带有一个外部链接(不在同一页面中)。
When I click it, it won't open the link (I assume jQuery script tries to scroll to it instead of opening...) 当我单击它时,它不会打开链接(我假设jQuery脚本尝试滚动到它而不是打开...)
How should I fix it or add exception? 我应该如何解决它或添加例外?
This is the html: 这是html:
<ul class="menyy">
<li><a href="#info">Mis on Rahapuu?</a></li>
<li><a href="#kkk">KKK</a></li>
<li><a href="#meist">Kes me oleme?</a></li>
<li><a href="http://rahapuu.eu/laenud/" target="_blank">Laenud</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
And this is the jQuery script for smooth scrolling: 这是用于平滑滚动的jQuery脚本:
//smooth scroll to href value
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
jQuery('html,body').animate({scrollTop:dest}, 1000,'swing');
});
Any advice? 有什么建议吗?
您可以对其进行过滤,使其仅包含具有基于散列的链接的锚点
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").filter('[href^=#]').click(function(event){ ...
Since someone else threw out adding a class (which is by far the best way to do this, however I recommend just applying that class across the board and simplifying the selector), I figured I would provide an alternative that was universal and didn't require modding the HTML (in case you couldn't for some reason): 由于其他人不愿意添加一个类(到目前为止,这是最好的方法,但是我建议您全面应用该类并简化选择器),我想我会提供一个通用的替代方案,需要修改HTML(以防您因某些原因而无法):
$(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a").filter(function(){
return (!this.target || this.target !== '_blank');
}).click(function(e){
e.preventDefault();
//calculate destination place
var dest = 0,
htDiff = $(document).height() - $(window).height(),
hashOffset = $(this.hash).offset().top;
if(hashOffset > htDiff){
dest = htDiff;
} else {
dest = hashOffset;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1000,'swing');
});
This will only filter your original collection of objects down to items that either do not have a target listed, or do not have a target with a value of _blank
. 这只会将您原始的对象集合过滤为没有列出目标或没有目标值为
_blank
。 I also took the liberty of caching your calculations, since you use them multiple times. 我还自由地缓存了您的计算,因为您多次使用它们。
You can give all the others a class
name and leave the link one out 您可以给所有其他人一个
class
名,而忽略链接
<ul class="menyy">
<li><a class="yourclass" href="#info">Mis on Rahapuu?</a></li>
<li><a class="yourclass" href="#kkk">KKK</a></li>
<li><a class="yourclass" href="#meist">Kes me oleme?</a></li>
<li><a href="http://rahapuu.eu/laenud/" target="_blank">Laenud</a></li>
<li><a class="yourclass" href="#kontakt">Kontakt</a></li>
</ul>
And change to this: 并更改为:
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand, .menyy a .yourclass").click(function(event){
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.