javascript - 制表系统活动课程未添加

Question

我有制表系统，如：

但是当我单击时，我正在创建一个 local.storage 但在 localstorage 上我正在向数据属性添加活动类，它没有添加我不知道的原因。

$(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>

将此代码用于本地存储，但此处未添加活动类，任何人都可以解释或指导我吗？我被困在这里，它让我保持相同的身份，但没有在其上应用活动课程，为什么会发生这种情况。

标签： javascriptjquery

Answer 1

您也可以使用以下代码：

$(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>