href 未链接到外部 url

Question

I downloaded a one pager template which is designed very strange. All hyperlinks are linking to sections on the page and it is using a data-link="" parameter.

Now I try to link one of the menu items to an external url with target _blank, but then it is looking for the url that I defined on the page itself (so it is looking for the section which is not there eg www.example.com/ http://google.nl )

The links has a value on the href elements like this:

 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>

So this doesn't work (also without the target _blank:

 <li><a id="navorder" href="http://order.company.com" target="_blank">Order Now</a></li>

What technology is used here? And how can I link a new menu item to a external page?

EDIT:

I found the code that is handling the 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; });

And when I click the link it is giving me the following error in console:

 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)

Answer 1

检查附带的JS代码，可能模板正在使用标记进行一些操作。

Answer 2

There should be a piece of code capturing all "a" clicks and prevents them for their default behavior. Remove that data attribute and use simple href. That should work.

If the coder was so strict, then the solution above might not work. Then you should do some gymnastics like using a div maybe and attach a click handler to it.

Answer 3

So since we don't know what kinda template you use you could use this:

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

This will redirect you to another page in a new tab. Hope this works for you, it's just a simple workaround.

Answer 4

The most obvious thing that is happening is that JavaScript captures all links (perhaps with a more specific selector), prevents the default action (ie follow the link) and scrolls to the section. Something like this, in 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, ie, don't follow the hyperlink // to a new location e.preventDefault(); }); });

---

Following your edit. Firstly, that's some bad JS imo. But on topic: if you want to have some links to actually open a new page, add a new class to them. For instance, use a class external for external links.

 <li><a id="navorder" href="http://order.company.com" target="_blank" class="external">Order Now</a></li>

and change the first line of the jQuery snippet as follows, so that the click handler is not attached to your .external elements.

 $(".menu ul li a").not('.social-link,.external').click(function(e) {

Answer 5

Ok, in this line:

 $(".menu ul li a").not('.social-link').click(function(e) {

You could add a class to your links (.external-link) and remove from the selection:

 $(".menu ul li a").not('.social-link').not('.external-link').click(function(e) {

Or you could be a little more clever and try to check if the link is external based on the href (the code only look for http, not https):

 $(".menu ul li a").not('.social-link').click(function(e) { if (e.target.href.indexOf('http://').== 0) { e;preventDefault(). }..