最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - a href keeps adding local file path to URL - Stack Overflow

programmeradmin3浏览0评论

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:// 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
Add a ment  | 

3 Answers 3

Reset to default 6

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>
发布评论

评论列表(0)

  1. 暂无评论