标签系统活动类未添加

Question

I have tabing system like :

but when i click i am creating a local.storage but on localstorage i am adding active class to data-attribute its not adding why i dont know.

 $(document).ready(function() { if (window.localStorage.getItem('last_tab_opened')) { var opentab = localStorage.getItem('last_tab_opened'); localStorage.removeItem('last_tab_opened'); $('button').attr('data-target') == opentab; $('*[data-target="' + opentab + '"]').click(); //working $('*[data-target="' + opentab + '"]').addClass('active'); //but not adding class active } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tab"> <button class="tablinks active" data-target="#email" data-toggle="tab" onclick="openTab(event, 'email')" id="defaultOpen">Email</button> <button class="tablinks" data-target="#call" data-toggle="tab" onclick="openTab(event, 'call')">Log a call</button> <button class="tablinks" data-target="#notes" data-toggle="tab" onclick="openTab(event, 'note')">Notes</button> <button class="tablinks" data-target="#tasks" data-toggle="tab" onclick="openTab(event, 'task')">Create Task</button> <button class="tablinks" data-target="#schedule" data-toggle="tab" onclick="openTab(event, 'reminder')">Schedule</button> </div>

using this code for localstorage but here class active is not added on this can anyone please explain or guide me ?? i am stuck here it hold me on same id but not applied the active class on it why this is happening.

Answer 1

You can use below code as well:

 $(document).ready(function(){ $(document).on('click', '.tablinks', function(){ var opentab = $(this).attr('data-target'); $('.tablinks').removeClass('active'); $('*[data-target="'+opentab+'"]').addClass('active'); }); });

 .active{ color: #FFFFFF; background: #333333; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="tab"> <button class="tablinks active" data-target="#email" data-toggle="tab" id="defaultOpen">Email</button> <button class="tablinks" data-target="#call" data-toggle="tab">Log a call</button> <button class="tablinks" data-target="#notes" data-toggle="tab">Notes</button> <button class="tablinks" data-target="#tasks" data-toggle="tab">Create Task</button> <button class="tablinks" data-target="#schedule" data-toggle="tab">Schedule</button> </div>