如何更改标签内的内容？ [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]

回答

相关问题