Nesting an entire DIV with content inside the tab

[boyankostov]

Hello,

Is it possible to set the plugin so it works with the following structure of the tabs:

<li class='tab'>
    <div>
        <a href="#tabs1-html">HTML Markup</a>
    </div>
</li>

I'm trying to do this, but it gives an error because of the DIV and it cannot find the anchor tag. Any way to change the trigger so it's triggered by the anchor tag inside of the div? I actually need this structure because I'll be adding a lot of other content inside the DIV and I need a second nested element to offset it (the LI in this case).

Thanks,
Boyan

[CableGuy67]

I was playing around with this and using the markup...

  <div id="tabs" class='tab-container'>
   <ul class='etabs'>
    <li class='tab'>
      <div class='divtab'>
        <a href="#tab1"><div></div></a>
      </div>
    </li>
</div>

It is easy enough to get the tabs using,

      $('#tabs').easytabs({
        tabs: 'ul div.divtab'
      });

however I'm guessing that you have found that the defaultTab just plain won't work right. The tab needs to be the top level li as far as easytabs is concerned. It works fine if you visit a page with a hash for the tab you wan't but not if you use a plain URL. The easiest way I found to work around that is to give the div just above the anchor tag a class of "default" and make that the defaultTab: when calling easytabs. If you can't do that I'm at a bit of a loss since the usual "li:first-child" (or in our case "div:first-child") won't work due to the way the defaultTab is assigned if one does not exist.

That is, if I have guessed correctly at what you are trying to accomplish. Just call easytabs with something like,

      $('#tabs').easytabs({
        tabs: 'ul div.divtab',
        defaultTab: 'div.default'
      });

You can see why https://github.com/JangoSteve/jQuery-EasyTabs/blob/master/lib/jquery.easytabs.js#L418-424 where it pretty much expects your tab to be just below the tab container element.

Example page: http://askcableguy.com/easytab/div-tabs.html