我对 jQuery 相当陌生,但在使用 Bootstrap Switch 时遇到了问题。
这是我的小提琴:http: //jsfiddle.net/egqjvz7b/3/
我有两个具有相同类但不同 id 的 div。两个 div 下方都有拨动开关。我想要做的是,当我切换第一个切换时,第一个 div 类从“box”更改为“selectedbox”,然后如果我切换到第二个切换,第一个 div 将返回原始类,第二个 div 更改为“选中框”。
在 'box' 和 'selectedbox' 之间,只有 box-shadow 是不同的,所以我也很乐意改变它。
希望我很清楚,有人可以提供帮助。干杯!
html
<body>
<div class="box" id="option1">
<p>Option 1</p>
</div>
<input type="radio" name="exampleToggle" id="toggleOption1" data-on-text="Selected" data-off-text="Select" data-on-color="success" data-off-color="primary" data-inverse="true">
<div class="box" id="option2">
<p>Option 2</p>
</div>
<input type="radio" name="exampleToggle" id="toggleOption2" data-on-text="Selected" data-off-text="Select" data-on-color="success" data-off-color="primary" data-inverse="true">
</body>
css
body{
margin: 30px;
}
.box{
background: rgba(255, 255, 255, 0.6);
border-radius: 5px;
border-top: solid 3px #18bc9c;
box-shadow: 0px 2px 5px #2c3e50;
padding:20px;
height:100px;
width:100px;
margin: 30px 0;
}
.selectedbox{
background: rgba(255, 255, 255, 0.6);
border-radius: 5px;
border-top: solid 3px #18bc9c;
box-shadow: 0px 0px 20px #18bc9c;
padding:20px;
height:100px;
width:100px;
margin: 30px 0;
}
js
$("[name='exampleToggle']").bootstrapSwitch();