我有一个切换按钮,允许用户选择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>
答案 0 :(得分:1)
我要说,为类似的按钮分别添加两行:
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");
});