Fatal编程技术网

Javascript 单击href时编写html

javascript jquery html

Javascript 单击href时编写html,javascript,jquery,html,Javascript,Jquery,Html,在一个无序列表中，我有一些a和一些href。单击时，我希望从外部文件中写入一些html。我不能使用任何服务器端语言，因为它只能在本地运行 我的文件的结构是： 项目1 项目2 项目3 项目4 提前感谢您不需要文档。write（） 您可能希望这样做，这取决于您希望新HTML的位置： $('head').append('<script src="js/square.js"></script>'); $（'head'）。追加（''）； 因为看起来您正在尝试加载脚本，所以

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

我的文件的结构是： 


    

  • 项目1
    • 

  • 项目2
    • 

  • 项目3
    • 

  • 项目4
    •
提前感谢

您不需要
文档。write（）

您可能希望这样做，这取决于您希望新HTML的位置：

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

$（'head'）。追加（''）；
因为看起来您正在尝试加载脚本，所以有一种更好的方法，可以使用：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
（或者选择您最喜欢的jQuery版本和CDN；这是众多版本中的一个。）

您可以监听对某个项目的单击，并基于此触发对相应文件的ajax调用。将该文件的内容加载到成功回调中的contentdiv中

很高兴在这里向您介绍示例代码：

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

<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>"}



    

  • item1
    • 

  • 项目2
    • 

  • 项目3
    • 

  • 项目4
    • 


//JS
//将一些文件内容转换为html
var genHtmlContent=函数（内容）{
//根据数据的存储方式在此处执行操作，例如，我们可以从某个keyvalue json返回html字符串
返回content.htmlContent；
}
//使用javascript检测对列表项的单击并获取适当的内容
$（“项目”）。单击（功能（事件）{
var selectedId=event.target.id；
变量url=”http://www.mysite.com/“+selectedId+”.json”；
$.get（url、函数（内容）{
var htmlContent=genHtmlContent（content）；
$（“#内容”）.val（htmlContent）；
})
})
//服务器上的示例json文件
//item1.json
{htmlContent:“我是项目1”}
一个快速简便的解决方案是
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>

document.write
将删除当前文档。这意味着您的整个页面将被您正在“编写”的内容所取代。这就是全部代码吗？您缺少head中的jquery标记，您是否检查了浏览器的javascript控制台是否有任何错误？此外，triangle、square和ball.js是否真的很大？如果它们很小，为什么不把它们放在一个加载在头上的主js文件中，然后单击调用所需的函数呢？ 
<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>"}

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

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

$('.iframes').hide();
$('#item1').click(function() {
    event.preventDefault();
    $('#iframe1').show();
});