单击链接并显示选项卡时，BS 3获取数据属性值

问题描述

我正在使用BS3，并具有以下标签：

<ul class="nav nav-tabs">
  <li class="active"> 
    <a id="tab-1" href="#annual_summary" data-toggle="tab">Annual Summary </a> 
  </li>
  <li> 
    <a id="tab-2" href="#monthly_summary" data-toggle="tab">Monthly Summary 
    </a> 
  </li>
</ul>

我在第一个标签中有一个这样的链接：

<a href="javascript:;" class="btn default btn-xs default button-action" 
   data-id="1" 
   data-year="2014" 
   data-month="January" 
   data-tab-destination="tab-2">
  <i class="fa fa-pencil"></i> Monthly Summary
</a>

当某人单击上面的链接时，它将移至第二个选项卡。 带有此jquery代码的data-tab-destination="tab-2"

 //move to tab 2 
  $("a[data-tab-destination]").on('click', function() {
    var tab = $(this).attr('data-tab-destination');
    $("#" + tab).click();
    $("html, body").animate({
      scrollTop: 0
    }, 500);
  });

在tab-2我有这个html标记：

<div class="header-wrapper">
  <input type="hidden" name="id" id="id">
  <p class="header-title">Year:
    <span class="header-text" id="header_year"></span>
  </p>
  <p class="header-title">Month:
    <span class="header-text" id="header_month"></span>
  </p>
</div>

我要实现的是单击链接并将其移至第二个选项卡时，我想获取数据属性值data-year="2014" data-month="January"并将其值放入#header_year, #header_month 。

我创建了这个js代码

//TAB ON SHOW
  $("a[href='#monthly_summary']").on('shown.bs.tab', function(event) {
              var div = $(event.relatedTarget)
   var id = div.data('id');
   var year = div.data('year');
   var month = div.data('month');
   var tab = $(this)

   tab.find('#id').attr("value", id);
   tab.find('#header_year').html(year);
   tab.find('#header_month').html(month);
  });

但似乎不起作用:(

请帮助我.....谢谢！

更新

这是我的工作代码：

  var id;
  var year;
  var month;

    //move to tab 2 when assignment button clicked
      $("a[data-tab-destination]").on('click', function() {

        id = $(this).data('id');
        year =  $(this).data('year');
        month = $(this).data('month');
        var tab = $(this).attr('data-tab-destination');
        $("#" + tab).click();
        $("html, body").animate({
          scrollTop: 0
        }, 500);
      });

      //TAB ON SHOW
      $("a[href='#monthly_summary']").on('show.bs.tab', function() {
           $('#id').attr("value", id);
           $('#header_year').html(year);
           $('#header_month').html(month);
      });