如何在语义UI按钮中切换内容？
如何在语义UI按钮中切换内容？
提问于 2014-04-13 00:07:21
documentation说可以对按钮进行格式化以打开或关闭，但给出的示例仅是
<div class="ui toggle button">
Vote
</div>当然，这是行不通的。对示例源代码的检查显示，以编程方式添加了一个active类。
我可能遗漏了一些简单的东西，但是我怎样才能像这个例子一样创建一个切换按钮呢？指定要在哪些内容之间切换的语法是什么？
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-04-13 00:26:29
下面的代码正在变魔术：
semantic.button = {};
// ready event
semantic.button.ready = function() {
// selector cache
var
$buttons = $('.ui.buttons .button'),
$toggle = $('.main .ui.toggle.button'),
$button = $('.ui.button').not($buttons).not($toggle),
// alias
handler = {
activate: function() {
$(this)
.addClass('active')
.siblings()
.removeClass('active')
;
}
}
;
$buttons
.on('click', handler.activate)
;
$toggle
.state({
text: {
inactive : 'Vote',
active : 'Voted'
}
})
;
};
// attach ready event
$(document)
.ready(semantic.button.ready)
;Stack Overflow用户
发布于 2016-03-23 23:55:27
让切换按钮在没有任何选项的情况下工作的最简单的方法如下：
$('.ui.button.toggle').state();这应该在单击时在默认的灰色和绿色之间切换。有关更复杂的行为，请参阅其他答案。确保像其他语义UI初始化器一样，首先加载DOM等。
Stack Overflow用户
发布于 2018-11-04 20:37:34
这很简单，
<button class="ui toggle button active" id="tgl">Toogle button</button>只需使用经典的jquery点击来切换活动类，并添加所需的任何其他更改。我认为在这种情况下使用语义阶段是浪费时间。
$('#tgl').click(function(){
$(this).toggleClass('active');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23032833
复制相关文章
相似问题
腾讯云开发者
