documentation说按钮可以格式化为打开或关闭，但给出的例子仅仅是
<div class="ui toggle button">
Vote
</div>
这当然不起作用。检查示例的源代码显示以编程方式添加了active类。
我可能遗漏了一些简单的东西，但是如何在该示例中创建一个切换按钮？指定切换内容的语法是什么？
下面的代码正在做着魔术：
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)
;
让切换按钮无任何选项等工作的最简单方法如下：
$('.ui.button.toggle').state();
这应该在点击时在默认的灰色和绿色之间切换。有关更复杂的行为，请参阅其他答案。确保首先加载DOM等，与其他语义UI初始化器一样。
这很简单，
<button class="ui toggle button active" id="tgl">Toogle button</button>
只需使用经典的jquery单击切换活动类，并添加所需的任何其他更改。我认为在这种情况下使用语义阶段是浪费时间。
$('#tgl').click(function(){
$(this).toggleClass('active');
});
以下简单代码适用于带有onClick事件的两个不同切换按钮。谢谢Mukesh鼓舞我。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="../../dist/semantic.css">
<script src="../assets/library/jquery.min.js"></script>
<script src="../../dist/semantic.js"></script>
</head>
<script>
function show(b){
alert( $(b).hasClass("active"));
}
// attach ready event
$(document)
.ready(function() {
var $toggle = $('.ui.toggle.button');
$toggle
.state({
text: {
inactive : 'Vote',
active : 'Voted'
}
})
;
})
;
</script>
<body>
<button class="ui toggle button" onclick="show(this)">
Vote
</button>
<br/><br/>
<button class="ui toggle button" onclick="show(this)">
Vote
</button>
</body>
</html>