6

我正在尝试使用semantic-ui建立一个网站。我喜欢我看到的很多东西。但是，我试图只创建一个选项卡控件。为了做到这一点，我想我抓住了概述页面上的代码。但是，正如我的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>

我究竟做错了什么？

4

3 回答 3

16

我也在调查这个。似乎选项卡插件尚未“发布”或记录在案。请参阅https://github.com/Semantic-Org/Semantic-UI/issues/209。

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

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

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

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

更新：

如果你传递{ history: false }给 tab 函数，那么你不需要 jquery.address。

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

工作示例

http://jsfiddle.net/8ap576p3/

于 2014-02-16T16:37:04.253 回答
1

我以为我会为仍然有问题的任何人提供一个选项：

我有一个基本网站，菜单中有 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>

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

希望这可以帮助。

于 2017-02-24T09:21:52.013 回答
0

对于它的价值，它对我不起作用，即使使用他们的示例代码也是如此。事实证明，缩小文件存在一些问题，所以如果你更新

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

不再用户

semantic.min.js

但相反，只是语义.js 它似乎工作。

不理想 - 但会让标签正常工作

于 2019-01-06T08:40:45.240 回答