AMP开发：amp-list选中选项无法高亮的问题求助

你当前的问题是：点击外部列表选项时，所有tab都触发了激活样式，因为你用了一个全局的active布尔变量，所有tab都基于这个变量判断是否激活，导致一点击全部变样式。

修复步骤： #

1. 替换全局布尔变量为选中产品名称
   把原来的active变量改成selectedProduct，用来存储当前选中的产品名称，这样就能精准匹配对应的tab。

2. 修改tab的类绑定逻辑
   将tab的[class]判断条件改成：当前tab的productName是否等于selectedProduct，相等则添加tab_active类，否则保留默认的tab类。

3. 调整点击事件的状态设置
   点击tab时，把selectedProduct设为当前的{{productName}}，而不是设置active:1。

4. 可选：设置默认选中项
   在amp-state里初始化selectedProduct，页面加载时就有一个默认激活的tab。

修改后的关键代码片段： #

1. 初始化默认选中状态（在amp-state里添加）

<amp-state id="items" src="https://winfuture-amp.s3.eu-west-2.amazonaws.com/products.json">
  <script type="application/json">
    {
      "selectedProduct": "你的默认产品名称" // 替换成products.json里存在的产品名
    }
  </script>
</amp-state>

2. 修改外部列表的模板代码

<amp-list layout="fixed-height" height="145" src="https://winfuture-amp.s3.eu-west-2.amazonaws.com/products.json" [is-layout-container]="true" binding="no">
  <template type="amp-mustache">
    <div [class]="selectedProduct === '{{productName}}' ? 'tab tab_active' : 'tab'" class="tab">
      <span role="button" tabindex="0" on="onclick:AMP.setState({name:'{{productName}}', selectedProduct:'{{productName}}'})">
        {{productName}}
      </span>
    </div>
  </template>
</amp-list>

说明： #

• 这样修改后，只有被点击的tab会匹配selectedProduct的值，从而应用tab_active样式，其他tab保持默认样式。
• 你的tab_active样式已经写好，不需要修改，只要确保类绑定逻辑正确即可。
• 子列表的过滤逻辑items.items.filter(product => product.productName == name)可以保留，因为点击时已经同步设置了name变量。

内容的提问来源于stack exchange，提问作者Nosipho