Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.</p> <p>Maybe the <a href="http://jqueryui.com/demos/tabs/" rel="noreferrer">jQuery UI Tab</a> might be helpful here if you like to try it.</p> <hr> <p>EDIT: AJAX example with UI Tabs.</p> <p>First, the HTML will look like this.</p> <pre><code> &lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="toframe.html"&gt;&lt;span&gt;Overviews&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="tawagpinoygallery.html"&gt;&lt;span&gt;Gallery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="trframe.html"&gt;&lt;span&gt;Reviews&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Then make sure that you import the appropriate jQuery files:</p> <pre><code> &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt; etc... </code></pre> <p>Then add the code to create the tabs:</p> <pre><code> &lt;script type="text/javascript"&gt; $(function() { $("#tabs").tabs(); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload