Load html file in another html file for dynamic tabs

Question

I was trying to implement dynamic tabs by following this link. It is straightforward to use. But to use this, all the HTML data should be on the same HTML file. How can I keep my HTML data in another file and use it when the respective tab is clicked?

Edit: I don't want the URL to change depending on the tab.

Load the tab content through AJAX. There are lots of tutorials on that if you Google. — Rory McCrossan, Jun 21 '17 at 09:35
Possible duplicate of [Bootstrap load tab from external URL](https://stackoverflow.com/questions/25333113/bootstrap-load-tab-from-external-url) — Sunil Kumar, Nov 01 '19 at 12:40
@SunilKumar Not same, I didn't want the url to change depending on the tabs. — as2d3, Nov 01 '19 at 12:50

score 0 · Answer 1 · answered Jun 21 '17 at 09:39

you can use load external file data on shown.bs.tab function using jQuery .load(). for updated reference you can go http://api.jquery.com/load/

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
  // call jquery load() here
})

Load html file in another html file for dynamic tabs

1 Answers1