如何从svg <a>单击</a> 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>

我已经摆弄了好几天，都无济于事。 我根本不想使用div隐藏/显示方法。

非常感谢！

〜狮子座

编辑

好的，我已经尝试做过您在小提琴中所做的事情，但是它仍然不会改变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”。 如果服务器返回错误（例如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>单击</a> div加载本地html

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-02-18 04:43:43

解决方案2
0 2015-02-18 05:18:18

解决方案3
0 2015-02-18 19:57:19

如何从svg <a>单击</a> div加载本地html

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-02-18 04:43:43

解决方案2 0 2015-02-18 05:18:18

解决方案3 0 2015-02-18 19:57:19

解决方案1
1 已采纳 2015-02-18 04:43:43

解决方案2
0 2015-02-18 05:18:18

解决方案3
0 2015-02-18 19:57:19