Question

我正在尝试使用semantic-ui建立一个网站。我喜欢我看到的很多东西。但是，我试图创建一个制表符控件。为了做到这一点，我想我抓住了概述页面上的代码。但是，作为我的jsfiddle shows，标签行为无法正常工作。这是我的标签代码示例：

<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>

我做错了什么？

Answer 1

我也在调查这个。看来这个标签插件还没有“发布”或记录下来。请参阅https://github.com/Semantic-Org/Semantic-UI/issues/209。

这里有一篇很好的博客文章，涵盖了这些标签：http://patrickgawron.com/wp/semantic-ui/

您的主要问题是您需要使用javascript连接标签。我添加了依赖项和这段代码来调用tab插件：

$(document).ready(function(){
    $('.demo.menu .item').tab();
});

http://jsfiddle.net/WinstonF/d93af/1/

<强>更新

如果将{ history: false }传递给制表符函数，则不需要jquery.address。

http://jsfiddle.net/WinstonF/d93af/2/

工作示例

http://jsfiddle.net/8ap576p3/

Answer 2

我想我会为仍有问题的人提供一个选项：

我有一个基本网站，菜单中有4个项目。以下是HTML的示例：

<div class="ui pointing menu">
    <div class="ui container">
        <a href="/route1" class="header item">
            TEXT
        </a>
        <a href="/route2" class="item">TEXT</a>
        <a href="/route3" class="item">TEXT</a>
        <a href="/route4" class="item">TEXT</a>
    </div>
</div>

在HTML的正文中，我有一个脚本，它会检查用户所在的路径，然后继续在菜单中将该选项卡设置为活动状态。此解决方案不依赖于用户单击菜单项，这非常方便。

<script>
    // get the current path the user is on and extract the route name
    var path = window.location.pathname.split("/").pop();

    // loop through each item
    $('.pointing.menu .item').each(function(i, obj){

        // extract the href (route) for the current item
        var href = obj.href.split("/").pop();

        // if the href and the path are the same, make that 
        // item the active tab
        if (href === path){
            $(this).addClass("active");
        }
    });
</script>

我尝试使用我在互联网上找到的其他一些答案，并且无法让他们中的任何一个工作。

希望这有帮助。

Answer 3

就其价值而言，即使使用他们的示例代码，它也对我不起作用。原来，缩小文件存在一些问题，因此，如果您更新

<script src="semantic/dist/semantic.js"></script>

不再使用

semantic.min.js

但是，相反，只是semantic.js似乎有效。

不太理想-但可以使标签正常工作

在语义ui中使用tab控件

3 个答案: