如果我有两个 div 元素，用户可以在两个选项之间进行选择。
我想表明用户已单击它，因此当用户单击某个元素时，该类会添加一些样式。
现在我只掌握了基础知识。用户只能选择两个元素之一。因此，如果用户已经单击了一个元素，就会出现样式。如果用户决定单击另一个元素，则先前的单击将被删除，然后在新的单击上添加样式。
$(".ind").on("click", ->
$(this).toggleClass("selected")
);
希望有人能指导一下，谢谢！
我正在尝试创建一个静音/取消静音按钮，我对 jquery 很陌生，所以如果有人能给我任何指示，那将会很有帮助：
$("#dinner").click(function() {
var bool = $("#player").muted;
$("#player").attr("muted",!bool);
});
我正在使用这个库来实现切换按钮。我有两个切换按钮。我的目的是当打开其中一个时，另一个应该关闭。
按照库的指示，我创建了两个input元素：
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="​" data-off="​" class="switch switch-on" checked value="true">
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="​" data-off="​" class="switch switch-off">
我的 jQuery 代码来处理它们：
$('.switch-on').change(function(){
$(this).removeClass('switch-on');
$(this).addClass('switch-off');
$(this).bootstrapToggle();
});
$('.switch-off').click(function(){
$(this).removeClass('switch-off');
$(this).bootstrapToggle();
$('.switch-on').click();
$(this).addClass('switch-on');
});
我尝试了很多方法，包括更改类名、触发事件，但完全无效。当我检查元素时，类名甚至没有改变。为什么它不起作用？
出于测试目的，我正在研究一种解决方案，该解决方案允许我仅使用一个按钮来显示和隐藏特定的 div（基于 id）。
jsifddle 在这里： 链接到代码
代码如下所示：
CSS
body {
font-family:'Trebuchet MS', sans-serif;
font-size:0.5em;
text-align:center;
}
.container {
padding:1em;
margin:0 auto;
background:#efefef;
}
#added-value-1 {
display:none;
}
#added-value-1:target {
display:block;
}
#expand-btn-1 {
margin:2em auto;
text-align:center;
padding:1em 2em;
font-weight:bold;
background:orange;
display:inline-block;
}
HTML
<div class="container">
<h1>
Container for testing purposes. Below content will show/hide upon button click
</h1>
<p id="added-value-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus maximus mattis. Nam id gravida lorem, ac egestas nunc. Proin …function toggle(source) {
checkboxes = document.getElementsByName("foo");
for(var i=0; i < checkboxes.length; i++) {
checkboxes[i].checked = source.checked;
}
}<form id="one">
<fieldset>
<legend>Select Quarter / 2017</legend>
<input type="checkbox" name="foo" onClick="toggle(this)" />All<br/>
<input type="checkbox" name="foo" >Q1 2017<br>
<input type="checkbox" name="foo" >Q2 2017<br>
<input type="checkbox" name="foo" >Q3 2017<br>
<input type="checkbox" name="foo" >Q4 2017<br>
</fieldset>
</form>
<form id="two">
<fieldset>
<legend>Select Quarter / 2017</legend>
<input type="checkbox" name="foo" onClick="toggle(this)" />All<br/>
<input type="checkbox" name="foo" >Q1 2017<br>
<input type="checkbox" name="foo" >Q2 2017<br>
<input type="checkbox" name="foo" >Q3 2017<br>
<input …我不知道这是否是某种循环保护,但是我想要一个按钮,当点击时打开或关闭图像并且此代码不起作用:
<script>
document.getElementById('standbybutton').onclick = function() {
if (document.querySelector('#standby img').style.visibility = 'hidden'){
document.querySelector('#standby img').style.visibility = 'visible'
} else {
document.querySelector('#standby img').style.visibility = 'hidden'
} return false;
}
</script>
我错过了什么？如果图像被隐藏,请将其显示.如果是,请将其隐藏起来.没有？
我想在div id1和div id2之间切换/切换可见性.我希望在页面加载时默认显示div id2,当我点击链接时我希望div id1替换div id2.我尝试了几种不同的方法,甚至在jsfiddle上玩了一下但是我无法弄清楚我在这里缺少什么.
HTML:
<a href="#id" onclick="toggle_visibility(id1, id2);">Change Payment Method</a>
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
JavaScript的:
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {
e.style.display = 'block';
e2.style.display = 'none';
}
else {
e.style.display = 'none';
e2.style.display = 'block';
}
}
我有一个切换按钮,它工作得很好,但现在我想看看除了切换效果之外还有办法获得悬停效果.
我查看了谷歌上的一些教程,但没有任何内容告诉我如何添加到当前配置.
您可以在http://jsfiddle.net/TC5kn/上查看小提琴
我不知道如何将图像输入小提琴,但我试图表明,当点击绿色部分时箭头会从下向上改变方向.
除了箭头改变方向,我想改变悬停颜色.
我问这个时间已经很晚了,显然这是一个简单的修复.答案是正确的.
使用jQuery库在div中淡入淡出.如何切换回原始颜色？(background-color:blue and color:white)
<script>
$(document).ready(function(){
$("#galleryb").click(function(){
$(".panel").fadeToggle(500);
$("#galleryb").css("background-color","#fff");
$("#galleryb").css("color","#000");
});
});
</script>
解:
$(document).ready(function(){
$(".galleryb").click(function(){
$(".panel").fadeToggle(500);
$('.galleryb').toggleClass('cls_name');
});
});
我有一个需要隐藏在页面加载上的div和输入.这是另一个指定,因此如果其他字段之一被选为"其他",那么div应该显示.但是输入元素没有隐藏在页面加载上.一旦我从它隐藏的div中取出输入元素,但是只要我将输入元素放回去它就不会隐藏,我做错了什么？
<head>
<script>
function hideother() {
document.getElementById("otherdiv").style.visibility = "hidden";
document.getElementById("others").style.visibility = "hidden";
}
</script>
</head>
<body onLoad="hideother()">
<!-- 2A OTHER SPECIFY -->
<div class="otherdiv">
<label for="otherspecify">Please specify other:</label>
<label id="error-2" style="text-transform:capitalize; color:red"> </label>
<br>
<input maxlength="30" name="others" id="others" type="text" class="form-control" placeholder="Other Specify" autocomplete="off" style="width:300px" />
</div>
</body>
我试图通过改变边距将一个div移到一边,然后返回一个转换.我有一个按钮,我想切换它的边距.div向右移动,但是当我再次单击时,它不会移回到它的原始位置.这就是我所拥有的:
HTML
<div id="movingdiv">
<a href="#" onclick="toggle()">Click Me!</a>
</div>
CSS
#movingdiv {
overflow: hidden;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: gray;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
JavaScript的
function toggle () {
var el = document.getElementById("movingdiv");
if ( el.style.marginLeft="250px" ) {
el.style.marginLeft="250px";
}
else {
el.style.marginLeft="0px";
}
}
toggle ×11
javascript ×7
html ×5
jquery ×5
css ×3
anchor ×1
audio ×1
checkbox ×1
coffeescript ×1
fieldset ×1
forms ×1
hidden ×1
input ×1
mute ×1
show-hide ×1
toggleclass ×1
visibility ×1