Question

我在项目页面中获取内容时遇到问题。（我现在试图解决这个问题4天了，在网上搜索 - 我会给我的右臂解决这个问题）

所以我有一个简单的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帮助

Answer 1

您需要使用JQuery编写一些JavaScript代码。

您需要一些方法：

click() - 添加点击事件处理程序。
data() - 从data属性获取值。
load() - 将内容从某个网址加载到某个元素。

<强> 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);更新网页的网址。

http://diveintohtml5.info/history.html

更新了JSFiddle： https://jsfiddle.net/up495fzs/8/

您不会在JSFiddle上看到网址更改，因为它在框架中运行。 在你的页面上试试。

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

如何将内容添加到我的项目页面中？（数据-URL）

1 个答案:

如何将内容添加到我的项目页面中？ （数据-URL）

1 个答案:

如何将内容添加到我的项目页面中？（数据-URL）