• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

选项框的颜色

php 搞代码 4年前 (2022-01-23) 16次浏览 已收录 0个评论
文章目录[隐藏]

默认情况下 All 的背景颜色 background-color: #e35964,点击其它选择的时候移除上一个选项的背景颜色(首次是All),
给当前的选择添加一个背景颜色 background-color: #e35964
点击是触发 onclick=”getCategory()”
我需要给这些 div 添加一个id 传入 getCate·本2文来源gaodai$ma#com搞$代*码网2搞gaodaima代码gory()来改变当前选项的背景?
如果这样做的话 我不知道如何移除 上一个选项的样式

<div class="banner01">            <ul>                <li>                    <div style="cursor:pointer;background-color: #e35964" class="d1">All</div>                </li>                                                <li style="margin-left:110px">                    <div style="cursor:pointer;" class="d2" onclick="getCategory('',1)"></div>                </li>                                <li>                    <div style="cursor:pointer" class="d2" onclick="getCategory('',1)"></div>                </li>                                            </ul>        </div>

<script>    function getCategory(category,page){    ...................   //改变选项颜色   ..................    }</script>

回复讨论(解决方案)

更新一下帖子
前面有做到类似的功能
我是用

把选择项包起来
在onclike function
重新读取选项的内容 把原div.html()内容替换掉,这样性能不好

用jq样式选择器方便点

用jq样式选择器方便点

但是我不知道如何去掉上一个的CSS

给你一个示例

<script src=scripts/jquery-1.8.3.min.js></script><script>$(function() {  $('.d1,.d2').click(function() {    $('.d1').addClass('d2').removeClass('d1');    $(this).attr('class', 'd1');  });});</script><style>li { float:left; }li div { width:200px }.d1 { background-color: #e35964 }.d2 { background-color: #ddd }</style><div class="banner01"> <ul>  <li>   <div style="cursor:pointer" class="d1">All</div>  </li>  <li>   <div style="cursor:pointer" class="d2">aaa</div>  </li>  <li>   <div style="cursor:pointer" class="d2">bbb</div>  </li> </ul></div>

<style>
.show {cursor:pointer;background-color: #e35964;}
</style>

  • All

  • 1

  • <script>
    function getCategory(id)
    {
    $(“.d3”).each(function()
    {
    $(this).removeClass(“show”);
    })
    $(“#div”+id).addclass(“show”)
    }
    </script>


    搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
    转载请注明原文链接:选项框的颜色
    喜欢 (0)
    [搞代码]
    分享 (0)
    发表我的评论
    取消评论

    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址