在js中我们经常会需要变形一些可以相互切换的多选项按键，比较典型的可以说就是导航栏了
这些选项中只有一个可以处于选中状态，也必须有一个处于选中状态，那我们应该然后实现呢?
比如我们可以建立一个css文件，设置被选中和没被选中的标签样式

div li {
	background:#3191FF;
	color: #ffffff;
}
/*这里我们将按键的默认样式设为白色字体和蓝色背景色*/
div .Choice {
	background:#1E90FF!important;
	color:#FFF68F!important;
}
/*这里我们又将被选中的样式设为浅黄字体和浅蓝背景色并用!important
提升了样式的优先级，保证了可以完美的覆盖原有的样式*/

HTML 的结构也需要按css选择器来布局元素

<div>
    <li>
        选项一
    </li>
    <li>
        选项二
    </li>
    <li>
        选项三
    </li>
</div>

Js我们需要引入jquery-1.8.3.js
设置点击事件触发选项切换逻辑，代码如下

$('div li').on('click', function () {
    $(this).addClass('Choice').siblings()
    .removeClass('Choice');
})

其实逻辑很简单，在点击某个li是将选中样式的class付给自己并去除同级元素的class