CODEWITHSUNDEEP
jquery
Chris
Chris

Reputation: 3129

how to set tab as active when dynamically creating tabs?

I am creating tabs dynamically and not sure how to set the first tab as active after the tabs have been created. I tried adding active when creating the list items but that obviously was wrong because all the items had the class active.

var junkData = [
        { "ID": "1", "AreaName": "Area A" },
        { "ID": "2", "AreaName": "Area B" },
        { "ID": "3", "AreaName": "Area C" },
        { "ID": "4", "AreaName": "Area D" },
        { "ID": "5", "AreaName": "Area E" }
    ];
    
$(document).ready(() => {

        CreateTabs();

        GetTabEvent();
    });

    function GetTarget(e) {
        var target = $(e.target).attr("href");
        console.log(target);
    }

    function CreateTabs() {
        for (i = 0; i < junkData.length; i++) {
            $('#List').append("<li id='" + junkData[i].ID + "' class='nav-item'><a class='nav-link' href='" + junkData[i].AreaName + "' data-toggle='tab'>" + junkData[i].AreaName + "</a></li>");
        }
    }

    function GetTabEvent() {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('.nav-link li.active').removeClass("active");
            GetTarget(e);
            $(this).addClass('active');
        });
    }
.nav-tabs > li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="DynamicTabsWrapper">
    <ul id="List" class="nav nav-tabs"></ul>
</div>

Upvotes: 0

Views: 1496

Answers (2)

Shashank
Shashank

Reputation: 5660

You don't need all that tab events or GetEventTarget functions.

Here's one approach just using the built-in Bootstrap $().tab method:

var junkData = [
        { "ID": "1", "AreaName": "Area A" },
        { "ID": "2", "AreaName": "Area B" },
        { "ID": "3", "AreaName": "Area C" },
        { "ID": "4", "AreaName": "Area D" },
        { "ID": "5", "AreaName": "Area E" }
    ];
    
$(document).ready(() => {

        CreateTabs();

        GetTabEvent();
    });

    function CreateTabs() {
        for (i = 0; i < junkData.length; i++) {
            $('#List').append("<li id='" + junkData[i].ID + "' class='nav-item'><a class='nav-link' href='" + junkData[i].AreaName + "' data-toggle='tab'>" + junkData[i].AreaName + "</a></li>");
        }
    }

    function GetTabEvent() {
	  $('ul#List [data-toggle="tab"]').tab();
      $('ul#List li:first-child [data-toggle="tab"]').tab('show');
    }
.nav-tabs > li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="DynamicTabsWrapper">
    <ul id="List" class="nav nav-tabs"></ul>
</div>

Upvotes: 1

Sanjit Bhardwaj
Sanjit Bhardwaj

Reputation: 893

You can take li first child and addClass="active" on it like 

$( "li" ).first().addClass("active" );

Upvotes: 0

Related Questions