Question

我正在尝试加载内容而不刷新页面。问题是我做了它但它没有加载图像文件和CSS文件。

这是我的代码：

<script>
            $(function(){
                $('.link').click(function(){
                    var page=$(this).attr('value');
                    console.log(page);

                $('#display').load(page);
                });
            })
      </script>

<select >
         <option value="#">Home</option>
         <option value="../myProjects/Aion-Paradise/index.html" class="link">Aion-Paradise</option>
         <option value="../myProjects/L2illusions/index.html" class="link">L2 Illutions</option>
         <option value="../myProjects/l2sold/index.html" class="link">L2 Sold</option>
         <option value="../myProjects/TemplateID1/index.html" class="link">Template 1</option>
         <option value="../myProjects/TemplateID2/index.html" class="link">Template 2</option>
    </select>

<p><br>
<div id="display"></div>

它加载HTML文件，但不加载图像和CSS文件的所有内容。任何的想法？提前谢谢。

Answer 1

当你调用.load（）命令时，它会从所选页面呈现html。检查渲染的源代码，并确保css和图像链接对于正在渲染的页面是正确的。

编辑：在您的html文件中，您可能会有如下图像：

<img src='../myimage.gif' />

如果您直接浏览浏览器中的html文件，这可能没问题，但是当您的div内部呈现页面时，src可能更像是这样：

<img src'myimage.gif' />

这完全取决于您如何布置文件夹结构以及图像/ css文件与页面相关的位置。

Answer 2

你必须将“value”属性更改为“href” 从这段代码

$(function(){
                $('.link').click(function(){
                    var page=$(this).attr('value');
                    console.log(page);

                $('#display').load(page);
                });
            })

到此代码

$(function() {
  $('.link').click(function() {
    var page = $(this).attr('href'); // 'href' contains your url
    console.log(page);

    $('#display').load(page);
  });
})

AJAX加载内容而不刷新页面

2 个答案: