我下载了一个非常奇怪的寻呼机模板。所有超链接都链接到页面上的部分,并使用data-link =“”参数。
现在我尝试将其中一个菜单项链接到带有目标_blank的外部网址,但之后它正在查找我在网页上定义的网址(因此它正在查找不存在的部分,例如www .example.com的/ http://google.nl)
链接在href元素上有一个值,如下所示:
href="/home/" or href="/menu/"
<ul id="w1" class="navbar-nav nav">
<li><a id="navhome" class="" href="/home" title="Home" data-link="home">Home</a></li>
<li><a id="navmenu" class="" href="/menu" title="Menu" data-link="menu">Menu</a></li>
所以这不起作用(也没有目标_blank:
<li><a id="navorder" href="http://order.company.com" target="_blank">Order Now</a></li>
这里使用什么技术?如何将新菜单项链接到外部页面?
修改
我找到了处理href的代码:
$(".menu ul li a").not('.social-link').click(function(e) {
e.preventDefault();
$(".menu ul li a").removeClass("active");
tabTarget = $(this).data('link');
animateByMenu = true;
var hash = '#' + tabTarget;
var url = $(this).prop('href');
var menuItem = $(this).data('link');
$(".menu li a[data-link=" + menuItem + "]").addClass("active");
if (url) {
var top = $(hash).offset().top - 60;
$('html, body').animate({
scrollTop: top
}, 600, function(){
});
history.pushState('', '', url);
$('.navbar-toggle:visible').click();
}
return false;
});
当我点击链接时,它在控制台中给出了以下错误:
main.js:109 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:109)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)
答案 0 :(得分:0)
检查附加的JS代码,也许模板正在对标签进行一些操作。
答案 1 :(得分:0)
应该有一段代码捕获所有&#34; a&#34;点击并阻止他们的默认行为。 删除该数据属性并使用简单的href。这应该有用。
如果编码器如此严格,那么上述解决方案可能无效。然后你应该做一些体操,比如使用div,并附上一个点击处理程序。
答案 2 :(得分:0)
因为我们不知道你使用什么样的模板,你可以使用它:
<ul id="w1" class="navbar-nav nav">
<li><a id="navhome" class="" href="/home" title="Home" data-link="home">Home</a></li>
<li><a onclick="window.open('http://www.google.com', '_blank')">Menu</a></li>
</ul>
这会将您重定向到新标签页中的另一个页面。希望这对你有用,这只是一个简单的解决方法。
答案 3 :(得分:0)
最明显的事情是JavaScript捕获所有链接(可能使用更具体的选择器),阻止默认操作(即按照链接)并滚动到该部分。在jQuery中这样的东西。
$("a").each(function(i, el) {
const $el = $(el);
$el.click(function(e) {
const href = $el.attr("href");
// Find an element that has href as an ID
// Scroll to that element
$("html, body").scrollTop($("#" + href).offset().top);
// Prevent default action, i.e., don't follow the hyperlink
// to a new location
e.preventDefault();
});
});
关注您的修改。首先,这是一个糟糕的JS imo。但是关于主题:如果你想要一些实际打开新页面的链接,请为它们添加一个新类。例如,使用类external
作为外部链接。
<li><a id="navorder" href="http://order.company.com" target="_blank" class="external">Order Now</a></li>
并按如下所示更改jQuery代码段的第一行,以便点击处理程序不会附加到您的.external
元素。
$(".menu ul li a").not('.social-link, .external').click(function(e) {
答案 4 :(得分:0)
好的,在这一行:
$(".menu ul li a").not('.social-link').click(function(e) {
您可以在链接中添加一个类(.external-link)并从选择中删除:
$(".menu ul li a").not('.social-link').not('.external-link').click(function(e) {
或者你可能会更聪明,并尝试根据href检查链接是否是外部的(代码只查找http,而不是https):
$(".menu ul li a").not('.social-link').click(function(e) {
if (e.target.href.indexOf('http://') !== 0) {
e.preventDefault();
}
...