Question

我有一个图像，我想，一旦我点击它，一个特定的HTML页面显示在一个特定的div。我找到了几个答案，但似乎都没有。我用jquery思考一些简单的东西，比如这里给出的答案：display html file in a div

你的解决方案是什么？

提前致谢。

EDIT1

我想通过点击图片来加载内部html页面（不是来自其他网站的外部页面）。这是我用的代码，从上面链接的答案中作为例子。

<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>

＆＃34; mainscreen＆＃34;是我想要显示html页面的最后一个div。函数.load（）内部有html页面的路径。但是没有html页面显示在div中。

EDIT2：我发现了一个愚蠢的错误。我使用这种结构：当元素的正确位置是。我也可以删除元素，但我使用CSS，而且放置元素比使用标记选项更舒服。感谢你的回复。明天我将看看jquery的代码是否有效。

Answer 1

我认为您的问题是，当您使用.load（）加载其他网站时。所有其他网站CSS / JavaScript都被加载，你的网站被覆盖。

你能告诉我们，你想要完成什么？您是从自己的网站或外部网址加载html页面吗？

如果您不关心其他网站使用的样式，您可以执行以下操作：

.load("example.com/some.html #content");

这将加载您指定的url，并将与此选择器对应的HTML元素的内容复制到目标元素中。（只有INLINE-CSS会以这种方式应用，你需要手动进行这种造型）

编辑：感谢您更新问题。

您正在尝试从文件系统加载文件。在.html文件的路径前添加file：//。

注意：特别是当您尝试使用AJAX时，您应该使用本地网站并使用相对路径！这使得以后部署网站变得更加容易，因为您不必重写所有网址。

Answer 2

这是jsFiddle

您的HTML代码

<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>

你的javascript

$(document).ready(function(){
    $(".img").click(function(){ //capture the event and ignite your work
        loadPage("http://fiddle.jshell.net/"); //call our function
    });
});

function loadPage(link){
    $.get(link,function(data){ //dont forget cross-browser rules.
          $(".targetDiv").append(data) //appended in to your div
    })
};

或者您可以将.load功能与链接参数一起使用。

Answer 3

假设您有以下HTML代码。

<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />

一些JavaScript代码（使用jQuery）。

var image = document.getElementById('js-image'),
    mainscreen = document.getElementById('mainscreen');

$(image).on('click', function() {
    $(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});

演示：http://jsfiddle.net/florianpircher/6wXBu/1/

您无法使用$("mainscreen")，因为这会选择<mainscreen>而非#mainscreen。在jQuery中，您需要一个CSS选择器（如$("#mainscreen")）。

通过单击图像在div中加载html页面

提前致谢。

3 个答案: