Можно ли использовать вкладки без использования тега привязки и идентификатора? - PullRequest
Новая
       5

Можно ли использовать вкладки без использования тега привязки и идентификатора?

7 голосов
/ 17 февраля 2011

Я хотел бы создавать динамические вкладки. поэтому якорные теги не будут иметь id также теги div не будут иметь идентификатора.

это то, что я пытаюсь сделать, но это не работает. 

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

Как я могу заставить это работать так?

Ответы [ 2 ]

6 голосов
/ 15 сентября 2012

Используя приведенный выше код Nuri Yilmaz, здесь это плагин 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 );
4 голосов
/ 17 февраля 2011

Это рабочий код.Динамически добавлять вкладки и 

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