是否可以使用Tabs而不使用锚标记和ID？

Question

我想生成动态标签.所以锚标签不会有id,div标签也不会有id.

这是我尝试做但它不起作用.

<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>

我怎么能让它像这样工作？

Answer 1

使用上面的Nuri Yilmaz代码,这里是一个jquery插件,使标签完全不使用id:

/**
 * 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 );

Answer 2

它是工作代码。动态添加 tab 和 a

<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>