语义的UI选项卡和JavaScript

使用语义的UI选项卡控制，我也找到了一些答案在 Using the tab control in semantic-ui 语义的UI选项卡和JavaScript

我下载的软件包从语义的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？

另外，是否有一个像引导程序的页面： http://getbootstrap.com/javascript 它不仅解释，而且还向您展示一些示例代码？

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

感谢您的帮助！

来源

2014-04-21 Jim

https://semantic-ui.com/modules/tab.html#/examples – kim366

可以使用。对（ '点击'）来更改类活动：

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

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

来源

2014-05-02 13:27:57

感谢分享，我这样做，并开始思考......这应该是照顾而不是我添加脚本。像引导程序一样，在包含bootstrap.js之后，它会为您执行某些操作。 – Jim

你需要开始使用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-31 09:25:35

$(".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-09 11:43:01 kzpromo

你能解释一下这个问题的答案吗？ – IanS

尽管此代码可能会回答这个问题，但提供关于此代码为何和/或如何回答此问题的其他上下文可提高其长期价值。不鼓励使用仅有代码的答案。 – Ajean

语义的UI选项卡和JavaScript

回答

相关问题