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">
<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?
You can make a HTML link open in a new tab by adding the target=”_blank” attribute. You should insert this after the link address.
The id and name attributes share the same name space. This means that they cannot both define an anchor with the same name in the same document. It is permissible to use both attributes to specify an element's unique identifier for the following elements: A , APPLET , FORM , FRAME , IFRAME , IMG , and MAP .
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
The first method requires a keyboard and a mouse or trackpad. Simply press and hold the Ctrl key (Cmd on a Mac) and then click the link in your browser. The link will open in a new tab in the background.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With