Как изменить содержимое внутри вкладки? [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

Lucas, Спасибо за 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]

ответ

Смежные вопросы