向滚动中的nav-tabs li添加活动类

是指在一个导航栏中，当用户滚动页面时，根据当前所在的位置，给相应的导航标签添加一个活动类，以突出显示当前所在的页面或部分。

这种功能通常用于长页面或单页应用，以提供更好的用户体验和导航指示。通过添加活动类，可以改变导航标签的样式，比如改变文字颜色、背景色或添加下划线等，以突出显示当前所在的页面。

在实现这个功能时，可以通过以下步骤来实现：

监听页面滚动事件：使用JavaScript代码监听页面的滚动事件，可以通过window对象的scroll事件来实现。
获取滚动位置：在滚动事件的回调函数中，通过window对象的scrollY属性或pageYOffset属性获取当前页面的滚动位置。
判断当前所在的位置：根据滚动位置和每个导航标签所在的位置，判断当前所在的页面或部分。
添加活动类：根据判断结果，给相应的导航标签添加一个活动类，可以使用classList属性的add方法来添加类名。

以下是一个示例代码，演示如何向滚动中的nav-tabs li添加活动类：

<!DOCTYPE html>
<html>
<head>
  <style>
    .active {
      color: red;
      /* 添加活动类的样式 */
    }
  </style>
</head>
<body>
  <nav>
    <ul class="nav-tabs">
      <li>首页</li>
      <li>产品</li>
      <li>服务</li>
      <li>关于我们</li>
    </ul>
  </nav>

  <div style="height: 2000px;"></div> <!-- 长页面内容，用于演示滚动效果 -->

  <script>
    window.addEventListener('scroll', function() {
      var navTabs = document.querySelectorAll('.nav-tabs li');
      var scrollPosition = window.scrollY || window.pageYOffset;

      // 根据滚动位置判断当前所在的页面或部分
      if (scrollPosition < 500) {
        setActiveTab(navTabs, 0); // 首页
      } else if (scrollPosition < 1000) {
        setActiveTab(navTabs, 1); // 产品
      } else if (scrollPosition < 1500) {
        setActiveTab(navTabs, 2); // 服务
      } else {
        setActiveTab(navTabs, 3); // 关于我们
      }
    });

    function setActiveTab(navTabs, index) {
      // 移除所有导航标签的活动类
      navTabs.forEach(function(tab) {
        tab.classList.remove('active');
      });

      // 给指定索引的导航标签添加活动类
      navTabs[index].classList.add('active');
    }
  </script>
</body>
</html>

在这个示例中，通过监听scroll事件，根据滚动位置判断当前所在的页面或部分，并通过setActiveTab函数给相应的导航标签添加活动类。通过修改.active类的样式，可以自定义活动类的样式效果。

对于腾讯云相关产品和产品介绍链接地址，由于不能提及具体的品牌商，建议在腾讯云官方网站上查找相关产品，比如腾讯云的云服务器、云数据库、云存储等产品，以及与前端开发、后端开发、网络安全等相关的产品。在腾讯云官方网站上可以找到详细的产品介绍和文档。