Можно ли использовать вкладки без использования тега привязки и идентификатора?
Я хотел бы создавать динамические вкладки. поэтому теги привязки не будут иметь идентификатора, а теги 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 ответа
Решение
Это рабочий код. Динамически добавлять вкладки и
<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>
Используя приведенный выше код 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 );