Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 862
Mehmet Cenk Ayberkin Avatar asked Feb 17 '11 17:02

Mehmet Cenk Ayberkin


People also ask

How do I open another tab in HTML?

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.

Can we give ID to anchor tag?

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 .

How do I toggle tabs in bootstrap?

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 .

How do you make a link open in a new tab?

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.


2 Answers

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 );
like image 186
bradypus Avatar answered Oct 19 '22 03:10

bradypus


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>
like image 26
Nuri YILMAZ Avatar answered Oct 19 '22 02:10

Nuri YILMAZ