0

在无序列表中，我有一些 a 和一些 href。单击时，我想从外部文件中写入一些 html。我不能使用任何服务器端语言，因为它只会在本地运行。

我的文件结构是： 

<body>
<ul>
    <li><a href="#">item1</li>
    <li><a href="#">item2</li>
    <li><a href="#">item3</li>
    <li><a href="#">item4</li>
</ul>

<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>

</html>

提前致谢

4

4 回答 4

1

由于看起来您正在尝试加载脚本，因此有一种更好的方法可以使用jQuery.getScript()：

$('#triangle').click(function() {
    $.getScript("js/triangle.js");
});

此外，正如 arieljuod 指出的那样，您实际上并没有在 HTML 文件中加载 jQuery。您需要这样做才能使用它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

（或者选择你最喜欢的 jQuery 版本和 CDN；这是众多版本之一。）

于 2013-10-15T03:12:17.313 回答
0

一个快速简单的解决方案将是一个iframe. 添加任意数量的 iframe，每个 iframe 都有不同的 url。给它们一个通用类并使用 CSS 或 jQuery 隐藏它们。单击链接时，防止默认并显示相应的 iframe，例如；

<ul>
    <li><a href="#" id="item1">item1</li>
</ul>

<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe> 
</div>

在你的 JavaScript 中，添加这个；

$('.iframes').hide();
$('#item1').click(function() {
    event.preventDefault();
    $('#iframe1').show();
});
于 2013-10-15T04:56:35.567 回答
0

你不想document.write()。

您可能想要这个，具体取决于您希望新 HTML 的位置：

$('head').append('<script src="js/square.js"></script>');
于 2013-10-15T03:11:53.717 回答
0

您可以侦听对某个项目的单击，并根据该单击触发对适当文件的 ajax 调用。在成功回调中将该文件的内容加载到您的内容 div 中。

很高兴在这里直播示例代码：https ://sudonow.com/session/525cb34035e089113700000a

在此处粘贴代码编辑器的内容：

<body>
<ul>
    <li id="item1" class="item"><a href="#">item1</li>
    <li id="item3" class="item"><a href="#">item2</li>
    <li id="item4" class="item"><a href="#">item3</li>
    <li id="item5" class="item"><a href="#">item4</li>
</ul>

<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>

</html>

//JS
//convert some file content to html
var genHtmlContent = function(content){
  //do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
  return content.htmlContent;
}

//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
  var selectedId = event.target.id;
  var url = "http://www.mysite.com/" + selectedId + ".json";
  $.get(url, function(content) {
    var htmlContent = genHtmlContent(content);
    $("#content").val(htmlContent);
  })

})

//sample json file on server

//item1.json

{htmlContent: "<div>I am Item 1</div>"}
于 2013-10-15T03:16:32.413 回答