首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >选定选项的不透明度

选定选项的不透明度
EN

Stack Overflow用户
提问于 2017-09-13 23:48:28
回答 1查看 227关注 0票数 0

我有一个切换按钮,允许用户选择1或2行。

因此,当用户单击id时,它将删除或添加类并显示不同的行,因此我需要在切换按钮上添加一个不透明度,如何?,我需要在实际选中的切换按钮上显示一个不透明度。

代码语言:javascript
复制
    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');
                    });
代码语言:javascript
复制
    .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;
    }
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-13 23:55:24

我想说的是,对于类似于下面的按钮,分别添加两行:

代码语言:javascript
复制
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");
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46208410

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档