CODEWITHSUNDEEP
javascriptjqueryhtml
DevRyu
DevRyu

Reputation: 75

how to change a content inside of tab? [JS, JQUERY and HTML5]

I've got a tab with a specific content, inside of the tab i've got a link to another page, but I wanna load this page inside of the same tab, without use a back end. Here's an example:

    <!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>

But the another content is a page .html, that's why I'm using a link to use href and try load the new content inside of the tab.

Any help?

Upvotes: 1

Views: 1905

Answers (3)

AK47
AK47

Reputation: 71

By using bellow code you can load any url for particular tab by adding custom attribute data-load

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>

Upvotes: 0

Joum
Joum

Reputation: 3245

So as you have seen in the other answers, .load() is the way to go.

You could call this when something happens, like a click event on a tab or something like that. For example, add something like this to your script:

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

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

Assuming you give the first tab in your HTML id="firstTab", of course.

Upvotes: 2

Lucas Rodrigues
Lucas Rodrigues

Reputation: 1192

You could use jQuery's load:

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

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

Upvotes: 1

Related Questions