is it possible to use Tabs without using anchor tag and id?

Question

i would like to generate dynamic tabs. so anchor tags will not have id also div tags wont have id.

this is what i try to do but it doesn't work.

<script>

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

            $("#tabs ul.super li a").each(function (index) {
                $(this).click(function () {
                    $("#tabs").tabs("select", index);
                });
            });
        });

    </script>
    <div id="tabs">
        <ul class="super">
            <li><a>title 1</a></li>
            <li><a>title 2 </a></li>
        </ul>
        <div>
            content1
        </div>
        <div>
            content2
        </div>
    </div>

How can i make it work like that?

Dagny

I wonder that if Tab's will be create at runtime? – Gailgaile

Answer 1

It is workind code. Dynamicaly add tab's and a's

<div id="tabs">
    <ul class="super">
        <li><a>title 1</a></li>
        <li><a>title 2 </a></li>
    </ul>
    <div>
        content1
    </div>
    <div>
        content2
    </div>
</div>
<script>
    $(function () {
        $("#tabs ul.super li a").each(function (index) {
            $(this).attr("href", "#spec" + index.toString());            
        });
        $("#tabs div").each(function (index) {
            $(this).attr("id", "spec" + index.toString());
        })
        $("#tabs").tabs();
    });      
</script>

Gailgaile

it must work. may be you should be ensure that JQuery library link. – Gailgaile

Answer 2

Using the Nuri Yilmaz's code above, here it is a jquery plugin making tabs using no id at all:

/**
 * use:
 *
 *  <div class="myTab">
 *      <ul class="super">
 *          <li><a>Tab label</a></li>
 *          ... some more tab lables
 *      </ul>
 *      <div class="tab_el">some content</div>
 *      ... some more div.tab_el
 *  </div>
 * 
 * <script>
 *      $('div.myTab').noIdTab();
 * </script>
 */


(function( $ ){

    $.fn.noIdTab = function() {

        this.each(function(){

            var rand = 'spec' + (new Date()).getTime() + Math.floor((Math.random()*25)+65);

            $(this).find('ul.super li a').each(function (index) {
                $(this).attr("href", "#" + rand + index.toString());            
            });

            $(this).find('div.tab_el').each(function (index) {
                $(this).attr("id", rand + index.toString());
            });
            $(this).tabs();

        });
    };
})( jQuery );

Tipster

Does your code support vertical tabs?? jqueryui.com/resources/demos/tabs/vertical.html – Devinne