是否可以在不使用锚标记和 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 的代码，这是一个完全不使用 id 制作选项卡的 jquery 插件：

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

这是工作代码。动态添加制表符和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>