如何更改標籤內的內容？ [JS，JQUERY和HTML5]

我有一個特定內容的選項卡，在選項卡內我有一個鏈接到另一個頁面，但我想要在同一個選項卡內加載此頁面，而不使用背面結束。這裏有一個例子：如何更改標籤內的內容？ [JS，JQUERY和HTML5]

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
     <title>TEST</title> 
    </head> 
    <body> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">A</a></li> 
       <li><a href="#tabs-2">B</a></li> 
       <li><a href="#tabs-3">C</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <p>ABCDEF...</p> 
       <a href="test.html">LOAD ANOTHER CONTENT IN THIS TAB HERE!</a> 
      </div> 
      <div id="tabs-2">2</div> 
      <div id="tabs-3">3</div> 
     </div>   
     <script> 
      $(function() { 
       $("#tabs").tabs(); 
      }); 
     </script> 
    </body> 
</html>

但另一個內容是網頁html的，這就是爲什麼我使用一個鏈接使用href和嘗試加載標籤內的新內容。

任何幫助？

來源

2016-01-12 DevRyu

http://api.jquery.com/load/ - 這看起來像一個案例... jQuery！開始閱讀本文... – Joum

查找jQuery'.load（）' - 它正是這樣 –

@Joum，謝謝，這正是我想要的。 – DevRyu

因此，如你所見在其他答案是，.load()是要走的路。

您可以在出現問題時調用此選項，例如選項卡上的click事件或類似事件。例如，添加這樣的事情你的腳本：

$(function() { 
    $("#tabs").tabs(); 
}); 

$("#firstTab").on("click", function(){ 
    $("#tabs-1").load("dir/page.html"); 
});

假設你給第一個標籤在你的HTML id="firstTab"，當然。

來源

2016-01-12 15:22:22 Joum

Joum，我用你的代碼，我完成了我的代碼，謝謝。 – DevRyu

@DevRyu np，有一個很好的！ – Joum

你可以使用jQuery的負載：

$("#tabs-1").load("page.html");

http://api.jquery.com/load/

來源

2016-01-12 15:06:02

盧卡斯，感謝sintaxe和lib。 – DevRyu

通過使用波紋管代碼，你可以加載特定標籤的任何URL通過添加自定義屬性數據加載

http://jqueryui.com/tabs/#ajax

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
    <title>TEST</title> 
</head> 
<body> 
    <div id="tabs"> 
     <ul> 
      <li data-load="test-a.html"><a href="#tabs-1" >A</a></li> 
      <li data-load="test-b.html"><a href="#tabs-2" >B</a></li> 
      <li data-load="test-c.html"><a href="#tabs-3" >C</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <p>ABCDEF...</p> 
      <a href="test.html">LOAD ANOTHER CONTENT IN THIS TAB HERE!</a> 
     </div> 
     <div id="tabs-2">2</div> 
     <div id="tabs-3">3</div> 
    </div>   
    <script> 
     $(function() { 
      $("#tabs").tabs({ 
       activate: function (event, ui) { 
       var url = $('.ui-tabs-active').data("load"), 
        containerId = $('.ui-tabs-active').find('a').attr("href"); 
        $(containerId).load(url); 

       } 
      }); 
     }); 
    </script> 
</body> 
</html>

來源

2016-01-12 15:15:05 AK47

請[僅限鏈接回答]（http://meta.stackoverflow.com/tags/link-only-answers/info）。答案是「幾乎不超過鏈接到外部網站」[可能會被刪除]（http://stackoverflow.com/help/deleted-answers） – Quentin

如何更改標籤內的內容？ [JS，JQUERY和HTML5]

回答

相關問題