Clever Geek Handbook

Could not get jquery tabs nested

Here is a complete sample script that demonstrates the problem, the internal company / department tab appears as a list instead of tabs.

Edit: I've already tried what people suggested that the inner tabs be jammed with jQuery as well, but

Code:

<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function(){
    //make tabs tabs
    $('#top-tabs').tabs({selected: 2});
});
</script>

</head><body>

<div id="top-tabs">
   <ul>
             <li><a href="/timeapp/home">Home</a></li>
             <li><a href="/timeapp/timecard">Timecard</a></li>
             <li><a href="#tab-selected">Config</a></li>
   </ul>

   <div id="tab-selected">
    <ul>
              <li><a href="#inner-tab-selected">Company</a></li>
              <li><a href="/timeapp/config/department">Department</a></li>
    </ul>
    <div id="inner-tab-selected">ok this is a company</div>

   </div>
</div>

</body></html>
+2


source to share


2 answers


I posted a question on the jquery forum and got the answer .

The reason is that it elem.tabs()

should be called on all inner tabs, the example I gave using the jQuery selector for example. $('#container ul').tabs()

so this is a modified script work:



<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function(){
    //make tabs tabs
    $('#top-tabs').tabs({selected: 2});
    $('#low-tabs').tabs({selected: 1});
});
</script>

</head><body>

<div id="top-tabs">
   <ul>
             <li><a href="/timeapp/home">Home</a></li>
             <li><a href="/timeapp/timecard">Timecard</a></li>
             <li><a href="#tab-selected">Config</a></li>
   </ul>

   <div id="tab-selected">
    <div id="low-tabs"> 
    <ul>
              <li><a href="#inner-tab-selected">Company</a></li>
              <li><a href="/timeapp/config/department">Department</a></li>
    </ul>
    <div id="inner-tab-selected">ok this is a company</div>
     </div> 
   </div>
</div>

</body></html>
+1


source


If this is your entire file, the problem is that you are not saying the divs with tabs selected are tabs. I haven't tested it but added:

 $('#tab-selected').tabs();


will probably do the trick.

+2


source






More articles:


All Articles