Html href打不開鏈接

Question

我正在制作一個投資組合頁面，一切正常，除了上傳項目鏈接。 這是我正在處理的代碼（這是一個免費的在線模板，所以不能更改大部分代碼）

 <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/大圖

Answer 1

嘗試將“www.google.com”更改為“https://www.google.com”，現在鏈接可能會將您轉到 [您的網站]/www.google.com

Answer 2

您可以在 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的鏈接

Answer 3

我已閱讀您的模板自述文件並了解發生了什么。 問題在於該模板使用了一個名為“ jquery.poptrox ”的組件。 該組件使畫廊鏈接打開帶有該圖片的彈出窗口。

做你想做的，找到文件“main.js”。 然后尋找$gallery.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>

如果您希望鏈接在瀏覽器的新選項卡中打開，請添加target="_blank"屬性。

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