앵커 태그와 ID를 사용하지 않고 탭을 사용할 수 있습니까?

Question

동적 탭을 생성하고 싶습니다. 앵커 태그는 ID가없는 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

작업 코드입니다. Dynamicaly 탭의 추가하고 여기에 JQuery와는 전혀 ID를 사용하지 않고 만드는 탭을 플러그인입니다, 위의 누리 마즈의 코드를 사용하여

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

Answer 2

입니다 :

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