可滚动的日期，然后单击日期显示特定内容

Question

我正在研究时间表应用程序。这是我的代码。

My Code

    $('.mytabs').scrollingTabs({
        enableSwiping: true,
        bootstrapVersion: 4,
        cssClassLeftArrow: 'fa fa-chevron-left',
        cssClassRightArrow: 'fa fa-chevron-right'
    });

我想在滚动条的顶部显示每周的日期。在特定日期，单击我要显示该日期的任务。现在，我正在使用引导程序选项卡和滚动选项卡。页面加载时，下周滚动显示当前星期日期，反之亦然。我该怎么办？

$('.mytabs').scrollingTabs({
  enableSwiping: true,
  bootstrapVersion: 4,
  cssClassLeftArrow: 'fa fa-chevron-left',
  cssClassRightArrow: 'fa fa-chevron-right'
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-bootstrap-scrolling-tabs@2.5.0/dist/jquery.scrolling-tabs.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-bootstrap-scrolling-tabs@2.5.0/dist/jquery.scrolling-tabs.js"></script>

<div class="col-12 border-bottom pb-3 pt-1">
  <ul class="nav nav-tabs mytabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" data-target="#dec1">
        <span>01 Dec</span>
        <span>2018</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec2">
        <span>02 Dec</span>
        <span>2018</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec3">
        <span>03 Dec</span>
        <span>2018</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec4">
        <span>04 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec5">
        <span>05 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec6">
        <span>06 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec7">
        <span>07 </span>
        <span>Dec</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" data-target="#dec8">
        <span>08 </span>
        <span>Dec</span>
      </a>
    </li>
  </ul>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="dec1">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>
  <div class="tab-pane  fade" id="dec2">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec3">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>
  <div class="tab-pane fade" id="dec4">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec5">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec6">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec7">
    <ul class="task-list">
      <li>
        Task Name
      </li>
      <li>
        Task Name
      </li>
    </ul>
  </div>

  <div class="tab-pane fade" id="dec8">
    <ul class="task-list">
      <li>
        Task Name
      </li>
    </ul>
  </div>

</div>