如何從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