HTML href 打不开链接答案

【问题标题】：Html href not opening linkHTML href 打不开链接
【发布时间】：2023-02-23 06:35:03
【问题描述】：

我正在制作一个投资组合页面，一切正常，除了上传项目链接。这是我正在处理的代码（这是一个免费的在线模板，所以不能更改大部分代码）

<article class="from-left">
  <a href="images/fulls/01.jpg" class="image fit">
    <img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
   </a>
</article>

问题是，当我用指向 github 页面的链接替换图像时，没有任何反应，网页进入循环类型等待图像。

 <article class="from-left">
  <a href="www.google.com" class="image fit">
    <img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
  </a>
</article>

我的 HTML 和 CSS 技能非常基础，不确定是什么问题。我想要的是，当我单击图片时，它会打开提供的链接。下面是我正在使用的免费 html 模板

https://html5up.net/big-picture

【问题讨论】：

标签： html css

【解决方案1】：

我已阅读您的模板自述文件并了解发生了什么。问题是模板使用了一个名为“jquery.poptrox”.该组件使画廊链接打开带有该图片的弹出窗口。

做你想做的，找到文件“main.js”。然后寻找$画廊.poptrox

您必须对整个块进行评论。它将是这样的：

//$gallery.poptrox({
//    baseZIndex: 10001,
//    useBodyOverflow: false,
//    usePopupEasyClose: false,
//    overlayColor: '#1f2328',
//    overlayOpacity: 0.65,
//    usePopupDefaultStyling: false,
//    usePopupCaption: true,
//    popupLoaderText: '',
//    windowMargin: 50,
//    usePopupNav: true
//});

请注意，我用双斜杠来注释每一行。这应该禁用该组件，您的链接现在将打开您想要的内容，而不是打开弹出窗口。您也可以删除此代码块，但我不知道您以后是否希望恢复原来的行为。所以，这取决于你。

重要的：

您的链接应以“https://“。所以，它会是这样的：

<article class="from-left">
    <a href="https://www.google.com" class="image fit">
        <img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
    </a>
</article>

如果您希望您的链接在浏览器的新选项卡中打开，请添加目标=“_空白”属性。

<article class="from-left">
    <a href="https://www.google.com" target="_blank" class="image fit">
        <img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
    </a>
</article>

【讨论】：

【解决方案2】：

尝试将“www.google.com”更改为“https://www.google.com”，现在链接可能会将您转到 [您的网站]/www.google.com

【讨论】：

【解决方案3】：

您可以在 URL 和 target="_blank" 中添加 https://，以便链接将在新选项卡中打开。

<article class="from-left">
  <a href="https://www.google.com" target="_blank" class="image fit">
    <img src="images/thumbs/01.jpg" title="Superstore project" alt="Sample Image" />
  </a>
</article>

这是JSBin的链接

【讨论】：

【解决方案4】：

我知道它已被标记为已解决，但如果我理解正确的话，还有一个更简单的解决方案。

来自Poptrox docs，在锚标签内你可以传递

data-poptrox="ignore"

它将作为一个普通的锚标签。

所以在OP的情况下

<article class="from-left">
  <a
    href="images/fulls/01.jpg"
    class="image fit"
    data-poptrox="ignore" <!-- ADD THIS LINE -->
  >
    <img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
   </a>
</article>

【讨论】：