bs3在单击链接并显示选项卡时获取数据属性值

BS 3 getting data attribute value when a link is clicked and tab on show

本文关键字：获取 数据属性 选项 显示 单击 链接 bs3      更新时间：2023-09-26

我使用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>

当某人点击上面的链接时，它移动到第二个选项卡。data-tab-destination="tab-2"的jquery代码

 //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);
      });

尝试使用div.data('year')代替div.data('year_filtered');

也试着用div.attr('data-year')代替div.data('year')(仔细看attr)

编辑:给链接

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

然后用它来获取js中的数据

// var div = $(event.relatedTarget)
var div = $('#a-tab-1')
相关文章：