Question

我的hrefs链接远离我的网站时遇到问题。

我的标题中的某些链接（链接到页面外的链接）无论如何都拒绝工作，但链接到内部div的标题中的链接工作正常。

此外，当我右键单击该链接并从下拉菜单中选择“打开”时，它将按预期工作。

链接到网站：

http://66.*.*.89

它是标题左上方的twitter和youtube按钮。

CSS代码：

#header {
    font-family:arneper;
    color:white;
    width:100%;
    height: 100px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.7);
}

#header #headermenu {
    width:97%;
    padding: 0;
    float:left;
    margin:0 25px;
}

#header #headermenu li {
    list-style: none;
}

#header #headermenu li a {
    color:#888;
    float:right;
    text-align:center;
    font-size:12px;
    margin:8px;
    width:50px;
    padding: 8px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-t-border-radius: 3px;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

#header #headermenu li a:hover {
    color:#FFF;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

#header #title {
    font: bold 310%/100% Didot, Arial, sans-serif;
    font-size:30px;
    font-weight: lighter;
    margin: 25px 40px 0px 35px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -2px;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

#header #title :hover{
    color: #888;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

标题HTML：

<div id="header">
    <div id="title"><a href="index.html" target="_blank">Home</a></div>
    <ul id="headermenu">
      <li style="float:left"><a href="http://www.twitter.com/">Twitter</a></li>
      <li style="float:left"><a href="http://www.youtube.com/">YouTube</a></li>
      <li><a href="#main">Top</a></li>
      <li><a href=".about">About</a></li>
      <li><a href=".code">Code</a></li>
      <li><a href=".portfolio">Portfolio</a></li>
    </ul>
  </div>

编辑：我刚才意识到页脚中的按钮有同样的问题..

Answer 1

你的标题中有这个jQuery代码

$('a').click(function(e){
   e.preventDefault();

   var target= $(this).attr("href");
   $target=$(target);

   $('html,body').animate({scrollTop:$target.offset().top},1200,'swing');
});

它针对所有链接，而不仅仅是内部链接。由于您正在呼叫e.preventDefault()，因此这些链接无法进入任何地方。

您可以将另一个类附加到内部链接并缩小jQuery选择器的范围，或者在处理程序中，您可以检查链接的href属性，看它是否以#开头。< / p>

你也可以使用jQuery的starts-with attribute selector.

$("a[href^='#']").click(function(e) {

（您需要更新链接以使用#而不是.）

HTML链接不会链接到http

1 个答案: