如何从 svg <a> click 在 div 中加载本地 html

Question

当我单击 svg 中的对象时，我试图在特定 div 中加载新的本地 html 页面。这是我的代码。

<html>

<head>
<script> 
$("#button").click(function(){
    $("#div1").load("1.html");
});

</script>


<svg width="100%" height="95%">
      <a xlink:href="#" id="button" class="button">
    <text x="150" y="45" fill="red">My Div</text>
  </a>

    </svg>

<style type="text/css"> 
#div1 {
    position:absolute;
    top: 15%;
    left: 15%;
    width:300px;
    height:300px;
    margin-top: -9px; /*set to a negative number 1/2 of your height*/
    margin-left: -15px; /*set to a negative number 1/2 of your width*/
    border: 1px solid #FFFFFF;
    background-color: none;
}

</style>


<div id="div1">Div Placement</div>



</body>
</html>

我已经 fiddle 研究了几天，但没有用。如果可能的话，我不想使用 div hide/show 方法。

非常感谢！

~狮子座

编辑

okie 我试过你在 fiddle 上做的事情，但它仍然不会改变 div。

这是我现在拥有的。是的，页面文件夹中存在索引。

<html>


 <head>

 <script type="text/javascript" src="/js.jquery/jquery-2.1.1.min.js">         </script>    
 <script> 
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});</script>    



 </head>

  <body bgcolor="#000000">

  <svg width="100%" height="95%">

   <a xlink:href="#" id="button" class="button">
   <text x="150" y="45" fill="red">My Div</text>
 </a>


   </svg>


     <div id="div1">Div Placement</div>

编辑

第三次代码迭代，仍然无法正常工作

<html>


<head>
  <meta charset="UTF-8">

  <title>Float Test</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   
<script> 
    $("#button").click(function(){
    $("#div1").text("Loading...");
    $("#div1").load("/pages/");
});</script>    



</head>

<body bgcolor="#000000">

<svg width="100%" height="95%">


        <a xlink:href="#" id="button" class="button">
    <text x="150" y="45" fill="red">My Div</text>
  </a>


    </svg>




<div id="div1">Div Placement</div>



</body>
</html>

Answer 1

对我来说效果很好。

http://jsfiddle.net/sumzujre/

主要问题似乎是您没有包含 jQuery 库。将此行添加到您的页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

此外，请确保“1.html”存在。如果服务器 returns 出现错误（例如 404），则不会向您的 div.

插入任何内容

更新：

在尝试向它们添加事件处理程序之前，您需要确保这些元素存在。要么将 <script> 块移动到文件末尾，要么将其保留在顶部并用 $.ready().

包围它

<script> 

$(document).ready(function() {

   $("#button").click(function(){
      $("#div1").text("Loading...");
      $("#div1").load("/pages/");
   });

});

</script>

Answer 2

我一直用ajax。像这样

<div id="my-content"></div> 
<a id="button">Click to load</a> 
<script type="text/javascript">
 $('#button').live('click',function(){
 $.ajax({ 
   method: 'POST', 
   url:'yourPage.html', 
   success:function(data){
      $('#my-content').html(data)
   } 
})}) 
</script>

Answer 3

<html>


<head>

  <title>Float Test</title>


</head>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   





<body bgcolor="#FFFFFF">




<svg width="100%" height="95%">


        <a xlink:href="#" id="button" class="button">
    <text x="150" y="45" fill="red">My Div</text>
  </a>


    </svg>



<style type="text/css"> 
#div1 {
    position:absolute;
    top: 15%;
    left: 15%;
    width:300px;
    height:300px;
    margin-top: -9px; /*set to a negative number 1/2 of your height*/
    margin-left: -15px; /*set to a negative number 1/2 of your width*/
    border: 1px solid #FFFFFF;
    background-color: none;
}

</style>


<div id="div1">Text</div>

代码的工作迭代。我删除了

内的主题标签

<a xlink:href="#" id="button" class="button">

在我的工作代码中。感谢您对我的不周到性的耐心等待

</body>
</html>
<script> 
$("#button").click(function(){
    $("#div1").load("1.html");
});

</script>

如何从 svg <a> click 在 div 中加载本地 html

How to load local html in div from svg <a> click

html

javascript

css

jquery

svg