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.

• javascript
• jquery
• html
• css

• Make sure you have http:// or https://. 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 3

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