javascript 使用 Amazon Mechanical Turk <crowd-tabs> 更改选项卡答案

【问题标题】：javascript to change tabs using Amazon Mechanical Turk <crowd-tabs>javascript 使用 Amazon Mechanical Turk <crowd-tabs> 更改选项卡
【发布时间】：2019-08-06 20:24:40
【问题描述】：

我正在使用 Amazon Mechanical Turk 的新 <crowd-form> 标签并正在创建一个带有 2 个选项卡的付费限定符，一个用于使用我们的界面进行说明和练习，另一个用于测试本身。我想在指令选项卡的底部放置一个按钮，以允许用户轻松进入测试选项卡，而无需一直滚动到顶部。有没有一种简单的方法可以使用亚马逊特殊的 <crowd-tabs> 元素来做到这一点？

【问题讨论】：

标签： javascript tabs mechanicalturk

【解决方案1】：

您实际上不需要任何 JavaScript 来实现这一点。

这是一个实现它的代码示例：

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-tabs id="tabs">
    <crowd-tab header="Tab 1">
      Tab 1 content
    </crowd-tab>

    <crowd-tab header="Tab 2">
      Tab 2 content
    </crowd-tab>
  </crowd-tabs>
</crowd-form>

<crowd-button onclick="tabs.activeIndex=0">
  Tab 1
</crowd-button>

<crowd-button onclick="tabs.activeIndex=1">
  Tab 2
</crowd-button>

这是一个有效的 JSFiddle https://jsfiddle.net/py91rekd。

一切顺利，

亚马逊机械土耳其人

【讨论】：

太好了。有什么方法可以让它“返回”到新激活标签的顶部？
其实这不太行。使用其中一个按钮更改活动选项卡后，这些选项卡本身将不起作用。（也就是说，如果我使用按钮转到tab2，那么点击tab1选项卡并不允许我切换回tab1