I'm having a bit of difficulty here. I am trying to set an <a>
tag to an external URL. But each time I do so, the local path to the index.html which contains the URL is added to the link. I have looked at my jQuery code and don't seem to see what the problem is. I have even used console.log(url) to test and it returns the URL properly.
$('.smoothscroll').on("click", function() {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
})
$('.smoothscroll').on('click', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
$('#login').on('click', function (e){
e.preventDefault();
var url = $(this).attr('href');
window.open(url, '_blank');
});
<ul id="nav" class="nav">
<li class="current"><a class="smoothscroll" href="#hero">Home.</a></li>
<!--<li><a class="smoothscroll" href="#portfolio">Works.</a></li>-->
<li><a class="smoothscroll" href="#about">About Us.</a></li>
<li><a class="smoothscroll" href="#portfolio">Features.</a></li>
<li><a class="smoothscroll" href="#contact">Create Account.</a></li>
<li><a class="login" id="login" href="google">Login.</a></li>
</ul>
I'm having a bit of difficulty here. I am trying to set an <a>
tag to an external URL. But each time I do so, the local path to the index.html which contains the URL is added to the link. I have looked at my jQuery code and don't seem to see what the problem is. I have even used console.log(url) to test and it returns the URL properly.
$('.smoothscroll').on("click", function() {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
})
$('.smoothscroll').on('click', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
$('#login').on('click', function (e){
e.preventDefault();
var url = $(this).attr('href');
window.open(url, '_blank');
});
<ul id="nav" class="nav">
<li class="current"><a class="smoothscroll" href="#hero">Home.</a></li>
<!--<li><a class="smoothscroll" href="#portfolio">Works.</a></li>-->
<li><a class="smoothscroll" href="#about">About Us.</a></li>
<li><a class="smoothscroll" href="#portfolio">Features.</a></li>
<li><a class="smoothscroll" href="#contact">Create Account.</a></li>
<li><a class="login" id="login" href="google.">Login.</a></li>
</ul>
Each time the new URL opens in a new tab, this is what i get: file:///C:/PASSIS%20-%20Landing%20Page/google.
Share Improve this question edited Feb 28, 2016 at 12:18 Mr Lister 46.6k15 gold badges113 silver badges155 bronze badges asked Feb 22, 2016 at 14:01 gbade_gbade_ 3491 gold badge11 silver badges23 bronze badges 2-
Make sure you have
http://
orhttps://
. That sometimes causes the issue. – Script47 Commented Feb 22, 2016 at 14:02 - Exactly right. Add the protocol. – CompanyDroneFromSector7G Commented Feb 22, 2016 at 14:05
3 Answers
Reset to default 6For external URLs you need to have the protocol (http://
or https://
) to let the HTML know that it is an external resource/site and not a local resource.
That confused me once too. The solution is quiet simple, just add the protocol type to the link, e.g:
<a href="https://google.">Google</a>
You have to add https://
(http://
) protocol before google.
, because you are not pointing to local file, but to external page:
<a class="login" id="login" href="https://google.">Login.</a>