3

使用语义 UI 选项卡控件，我确实在使用语义 UI 中 的选项卡控件中找到了一些答案

我从semantic-ui 下载了包，打开了feed.html 并修改了以下内容：

<body id="feed">
        <div class="ui secondary pointing menu">
        <a class="active item">
            <i class="home icon"></i>Home</a>
        <a class="item">
            <i class="mail icon"></i>Messages</a>
        <a class="item">
            <i class="user icon"></i>Friends</a>

    </div>
    </body>

它不工作

使用我在Using the tab control in semantic-ui 中找到的内容，我改为：

<div class="ui secondary pointing menu">
        <a class="active item">
            <i class="home icon"></i>Home</a>
        <a class="item">
            <i class="mail icon"></i>Messages</a>
        <a class="item">
            <i class="user icon"></i>Friends</a>

    </div>

http://jsfiddle.net/d93af/19/

有人可以指点我如何正确使用语义用户界面吗？

另外，是否有类似 bootstrap 的页面：http: //getbootstrap.com/javascript ，它不仅解释了，还向您展示了一些示例代码？

我在语义用户界面站点中找不到此类信息。

谢谢您的帮助！

4

3 回答 3

7

您可以使用 .on('click') 更改活动类：

http://jsfiddle.net/d93af/22/

$(document).ready(function(){
   $('.ui .item').on('click', function() {
      $('.ui .item').removeClass('active');
      $(this).addClass('active');
   });             
});
于 2014-05-02T13:27:57.523 回答
7

您需要使用 jQuery 启动这是工作示例

<div class="ui grid page">
    <div class="column">
        <div class="ui pointing secondary menu" id="tabsTwo">
            <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 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>
</div>

并使用此脚本启动

$('.menu .item').tab();
于 2016-05-31T09:25:35.450 回答
1 
$(".item").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    var tab = $(this).attr("data-tab");
    $(".tab.segment").removeClass("active");
    $(".tab.segment[data-tab=\"" + tab + "\"]").addClass("active");
});
于 2016-08-09T11:43:01.403 回答