我找了很多，但我找不到一个解决方案，你能帮我吗

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="click" href="#" data="new">New product</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" id="click" data="sale">Sale product</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" id="click" data="trent">Trend product</a>
  </li>
</ul>
<div class="tabspane"></div>

1.我想在每次点击时用 AJAX 在<li>标签之间传递data=“new”，data=“销售”和data=“trend”信息。
1.我希望新建数据在未单击时处于活动状态。
我试了几次，但都没有成功：

$(document).ready(function() {
  $('.nav-link').click(function() {
    var datas = $(this) attr("data");
  });
  $.ajax({
    url: 'indextab.php',
    type: 'POST',
    data: { datas: datas },
    success: function(datal) {
      $('.tabspane').html("").html(datal);
      alert(datas);
    }
  });
});

请在这个问题上提供帮助。