is it possible to use Tabs without using anchor tag and id?
i would like to generate dynamic tabs. so anchor tags will not have id also div tags wont have id.
this is what i try to do but it doesn't work.
<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">开发者_StackOverflow社区;
<li><a>title 1</a></li>
<li><a>title 2 </a></li>
</ul>
<div>
content1
</div>
<div>
content2
</div>
</div>
How can i make it work like that?
Using the Nuri Yilmaz's code above, here it is a jquery plugin making tabs using no id at all:
/**
* 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 );
It is workind code. Dynamicaly add tab's and a's
<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>
精彩评论