logo标签列表

语义化UI标签和JavaScript

semantic-ui
3
使用语义化UI标签控件时，我在使用语义化UI标签控件中找到了一些答案。 我从语义化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>

而且它没有起作用。

根据我在使用语义化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/

请问有人能够指导我如何正确使用Semantic UI吗？

此外，是否有像Bootstrap这样的页面：http://getbootstrap.com/javascript， 既可以解释，也可以展示一些示例代码？

我在Semantic UI网站上找不到这样的信息。

感谢您的帮助！

https://semantic-ui.com/modules/tab.html#/examples - Post Self
3个回答
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();
7
您可以使用.on('click')来更改active类： http://jsfiddle.net/d93af/22/ 
$(document).ready(function(){
   $('.ui .item').on('click', function() {
      $('.ui .item').removeClass('active');
      $(this).addClass('active');
   });             
});
1
感谢分享，我尝试了一下并开始思考...这应该由程序自动处理，而不是我添加脚本。就像Bootstrap一样，在包含bootstrap.js后，它会为您完成一些操作。 - Jim
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");
});
请问您能否解释一下这个回答如何回答了问题？ - IanS
虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。仅限代码的答案是不被鼓励的。 - Ajean
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接