StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>It works fine for me, if I follow the format as in jquery ui's <a href="http://jqueryui.com/tabs/" rel="nofollow noreferrer">tabs documentation</a>,</p> <p>You need to give id to your ul as this,</p> <pre><code><div class="navigation"> <ul> <li><a href="#tabs-1">ONE</a></li> <li class="sub"> <a href="#tabs-2">TWO</a> </li> <li><a href="#tabs-3">THREE</a></li> </ul> <ul id="tabs-2" class="submenu"> <li><a href="ajax/testA.php">A</a></li> <li><a href="ajax/testB.php">B</a></li> <li><a href="ajax/testC.php">C</a></li> </ul> </div> </code></pre> <p>Check the <a href="http://jqueryui.com/tabs/" rel="nofollow noreferrer">tabs documentation</a>.</p> <p><strong><a href="http://jsfiddle.net/2rfm5/28/" rel="nofollow noreferrer">JSFIDDLE DEMO 1</a></strong></p> <p>If you are looking for second id to be tabs too,</p> <p><strong><a href="http://jsfiddle.net/2rfm5/30/" rel="nofollow noreferrer">JSFIDDLE DEMO 2</a></strong></p> <p>And after you I saw the link you gave me, the child ul too needs to be tabbed so that you can get contents using ajax, just by providing a href attribute.</p> <p><strong>EDIT,</strong></p> <p>I made two files,</p> <pre><code>maindir - index.html - ajax (directory) -- testB.php </code></pre> <p><strong>index.html,</strong></p> <pre><code><!DOCTYPE html"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta name="description" edit="mootools shell, easy test you snippets before implementing"/> <meta name="keywords" edit="mootools,javascript,javascript framework,shell,test"/> <meta name="robots" edit="all"/> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/tabs/resources/demos/style.css" /> </head> <body> <div class="navigation"> <ul> <li><a href="#tabs-1">ONE</a></li> <li class="sub"> <a href="#tabs-2">TWO</a> </li> <li><a href="#tabs-3">THREE</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p> </div> <div id="tabs-2"> <ul class="submenu"> <li><a href="ajax/testA.php">A</a></li> <li><a href="ajax/testB.php">B</a></li> <li><a href="ajax/testC.php">C</a></li> </ul></div> </div> <script type="text/javascript"> $( ".navigation" ).tabs(); $("#tabs-2").tabs(); </script> </body> </html> </code></pre> <p><strong>testB.php,</strong></p> <pre><code><?php echo "content of B"; ?> </code></pre> <p>And it shows me this,</p> <p><img src="https://i.stack.imgur.com/RHQEq.png" alt="enter image description here"></p> <p>From comments,</p> <blockquote> <p>In jquery-ui, you can directly give link to get content via ajax. Well then the problem is, the children ul li ul li, are not tabbed. I guess if that was tabbed too, then only you can use it to get content via ajax. As in my first fiddle example, you click on an href, it redirects you to show 404. But in second fiddle, it has a link but is tabbed, it does not redirect but gets contents via ajax. So basically you just need to do it like the second example. Just do $("#tab-2").tabs(), this should solve your problem.</p> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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