semantic-ui - セマンティック UI でタブ コントロールを使用する

Question

Semantic-uiを使用して Web サイトを構築しようとしています。私は私が見るものの多くが好きです。ただし、タブ コントロールを作成しようとしています。これを行うために、概要ページにあるコードを手に入れたと思いました。ただし、私のjsfiddleが示すように、タブの動作が正しく機能していません。これが私のタブコードのサンプルです：

<div class="row">
  <div class="ui active tab segment" data-tab="first">First</div>
  <div class="ui tab segment" data-tab="second">Second</div>
  <div class="ui tab segment" data-tab="third">Third</div>

  <div class="ui pointing secondary demo menu">
    <a class="active red item" data-tab="first">One</a>
    <a class="blue item" data-tab="second">Two</a>
    <a class="green item" data-tab="third">Three</a>
  </div>
</div>

私は何を間違っていますか？