Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery UI - Tabs with remote content (simulated)</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <style> body{font-family:Arial, sans-serif; padding:20px;} #tabs{max-width:500px;} </style> </head> <body> <h3>Simulated "remote" tab</h3> <p>In a real project the third tab's <code><a></code> would point at a server URL and jQuery UI would fetch it over AJAX automatically. This demo has no backend, so a click handler fakes the network delay with <code>setTimeout</code> and fills the panel manually - the important part is the tabbed UI/UX, not the fetch itself.</p> <div id="tabs"> <ul> <li><a href="#tab-1">Local Tab</a></li> <li><a href="#tab-2" class="remote-tab">"Remote" Tab</a></li> </ul> <div id="tab-1"><p>This panel's content was already in the page.</p></div> <div id="tab-2"><p>Click this tab to simulate loading...</p></div> </div> <script> $(document).ready(function(){ $("#tabs").tabs(); var loaded = false; $(".remote-tab").on("click", function(){ if (loaded) return; loaded = true; var $panel = $("#tab-2"); $panel.html("<p><em>Loading...</em></p>"); setTimeout(function(){ $panel.html("<p>This content was "loaded" after a simulated AJAX request finished.</p>"); }, 600); }); }); </script> </body> </html>
Output