单击href时写入html

时间:2013-10-15 03:06:45

标签: javascript jquery html

在一个无序的列表中,我有一些带有一些href的东西。单击时,我想从写入的外部文件中获取一些html。我不能使用任何服务器端语言,因为它只会运行localy。

我的文件结构是:               

<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 个答案:

答案 0 :(得分: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;这是其中之一。)

答案 1 :(得分:0)

您不希望document.write()

您可能需要这样做,具体取决于您希望新HTML的位置:

$('head').append('<script src="js/square.js"></script>');

答案 2 :(得分: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>"}

答案 3 :(得分:0)

快速简便的解决方案是iframe。根据需要添加任意数量的iframe,每个iframe都有不同的网址。给他们一个公共类,并使用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();
});