我有一个切换按钮,允许用户选择1或2行。
因此,当用户单击id时,它将删除或添加类并显示不同的行,因此我需要在切换按钮上添加一个不透明度,如何?,我需要在实际选中的切换按钮上显示一个不透明度。
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
}); .toggle-one{
background-image: url(images/toggle_1.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}
.toggle-two{
background-image: url(images/toggle_2.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-rows" style="top: 118px;
right: 30px;
position: absolute;">
<nav>
<ul>
<li style="display: inline-block;">
<div class="toggle-one " id="onw-row">
</div>
</li>
-
<li style="display: inline-block;">
<div class="toggle-two" id="two-rows">
</div>
</li>
</ul>
</nav>
</div>
发布于 2017-09-13 23:55:24
我想说的是,对于类似于下面的按钮,分别添加两行:
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
$("#one-row").css("opacity", "1");
$("#two-rows").css("opacity", "0.3");
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
$("#one-row").css("opacity", ".0.3");
$("#two-rows").css("opacity", "1");
});https://stackoverflow.com/questions/46208410
复制相似问题