如何在Semantic UI标签页中使用Codeigniter视图？

我刚在自己的CodeIgniter项目里用上了Semantic UI的标签页组件，这里给大家贴出main_view.php里的核心实现代码，作为基础配置参考：

<div class="ui pointing secondary menu">
  <a class="active item" data-tab="tab1">Tab 1</a>
  <a class="item" data-tab="tab2">Tab 2</a>
  <a class="item" data-tab="tab3">Tab 3</a>
</div>
<div class="ui container">
  <div class="ui bottom attached active tab" data-tab="tab1">
    <!-- 这里放置Tab 1的具体内容 -->
  </div>
  <div class="ui bottom attached tab" data-tab="tab2">
    <!-- 这里放置Tab 2的具体内容 -->
  </div>
  <div class="ui bottom attached tab" data-tab="tab3">
    <!-- 这里放置Tab 3的具体内容 -->
  </div>
</div>

顺便提几个关键的配置细节：

• 顶部的.ui pointing secondary menu是标签切换的导航栏，active类用来标记默认选中的标签项；
• 底部的每个.tab容器对应一个标签的内容，默认显示的标签内容也需要加上active类才能正常渲染；
• 标签项和内容容器通过data-tab属性的对应值关联，Semantic UI会自动处理点击切换的逻辑（前提是你已经引入了Semantic UI的JS文件）。

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