Question

使用semantic-ui tab控件，我确实找到了一些答案 Using the tab control in semantic-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/

有人可以指出我如何正确使用语义ui？

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

我在semantic-ui网站上找不到这样的信息。

感谢您的帮助！

Answer 1

您可以使用.on（＆＃39;点击＆＃39;）更改活动类：

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

$(document).ready(function(){
   $('.ui .item').on('click', function() {
      $('.ui .item').removeClass('active');
      $(this).addClass('active');
   });             
});

Answer 2

您需要使用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();

Answer 3

$(".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");
});

语义ui选项卡和javascript

3 个答案: