如何將內容加入我的項目頁面？（data-url）

我有一個問題獲取內容的項目頁面。（我從字面上試圖找出這4天，搜索網絡 - 我會給我的右臂來解決這個問題）如何將內容加入我的項目頁面？（data-url）

所以我有一個簡單的index.html頁面有7個項目（7個拇指圖像代表每個組合項目）。當我點擊其中一幅圖像時，我想進入顯示其內容的頁面 - 我進入了新頁面/＃/ WORK1 /，但我無法弄清楚在哪裏/如何在這個新網址中插入我的內容？

你可以在這裏我的網站上看到的問題： awesth.dk

這裏是我使用的7個項目中的代碼。 WORK1，WORK2等

<div id="projectPages"> 

<div class="project page-project" data-url="/WORK1/" > 

    <!-- Will be fetched on-demand --> 

</div> 
...

（所以我不知道我是如何得到它是「按需取」）

這裏是7個點擊大拇指：

<div id="projectThumbs" > 
<div class="wrapper"> 

    <a class="project "href="/WORK1/" > 
    <div> 
     <div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div> 
     <div class="project-title">Titel1</div> 
    </div> 
    </a> 
    ...

Pleaaase幫助

來源

2015-07-12 Aske W

那你實際上是由「取點播」是什麼意思？ –

您需要使用使用JQuery編寫一些JavaScript代碼。

有你需要的方法：

click() - 添加單擊事件處理程序。
data() - 從data屬性獲得值。
load() - 將內容從某個URL加載到某個元素。

UPD

有使用這些方法的一個例子。它適合你的情況嗎？

https://jsfiddle.net/up495fzs/

UPD2

您需要在服務器上更新HTML代碼。

請注意data-project-id="1"和id="project-id-1"。並分別更新號碼。

在data-url設置您的相對路徑。如果你想加載WORK1.html文件，你應該寫：data-url='/WORK1.html'（最後沒有/）。

UPD3

塊之間的連接由data-project-id="1"id="project-id-1"和屬性進行。

我改變了獲取網址的方式。我把它留在<a href="...">並從<div class="project page-project">刪除。

https://jsfiddle.net/up495fzs/6/

但現在我意識到，我不明白爲什麼你需要很多<div class="project page-project">元素。爲什麼不使用一個？

https://jsfiddle.net/up495fzs/5/

UPD4

而且你需要了解CORS（跨源資源共享） - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

你可以只從您的網站加載內容。如果您嘗試從外部網站加載頁面，它會失敗。

UPD4

你可以使用history.pushState(null, null, link.href);更新頁面的URL。

http://diveintohtml5.info/history.html

更新的jsfiddle： https://jsfiddle.net/up495fzs/8/

你不會看到的jsfiddle URL的變化，因爲它在一個框架中運行。 在您的頁面上嘗試。

UPD5

到jQuery庫添加鏈接到您的網頁的<head>，但我的腳本之前。

添加我的包裝爲$(function() { /* JS code */ });的腳本以正確執行它。

<head> 
... 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
... 
<script> 
    $(function() { 
    /* JS code from JSFiddle */ 
    }); 
</script>

來源

2015-07-12 12:02:32

您需要提供更完整的代碼。請用您的HTML代碼更新該JSFiddle。 –

我看到該示例正在jsfiddle工作 - 但不幸的是，我無法讓它在我的頁面上工作，即使我從jsfiddle複製html並將JQuery放在我的之上。如果我這樣做，我的拇指突然不再是可點擊的了？在你寫的jsfiddle例子中：data-url =「/ user/login /」 - 然後它顯示用戶登錄到jsfiddle。（完美）那麼，我將其替換爲我上傳到我的服務器的HTML頁面？例如：我上傳WORK1.html到我的服務器並寫入data-url =「/ WORK1.html /」？ –

@AskeW更新了我的答案。 –

如何將內容加入我的項目頁面？ （data-url）

回答

相關問題

如何將內容加入我的項目頁面？（data-url）