选项框的颜色

php中文网
发布: 2016-06-23 13:22:21
原创
1265人浏览过


默认情况下 all 的背景颜色 background-color: #e35964,点击其它选择的时候移除上一个选项的背景颜色(首次是all),
给当前的选择添加一个背景颜色  background-color: #e35964
点击是触发 onclick="getcategory()"  
我需要给这些 div 添加一个id 传入 getcategory()来改变当前选项的背景?
如果这样做的话  我不知道如何移除 上一个选项的样式

<div class="banner01">            <ul>                <li>                    <div style="cursor:pointer;background-color: #e35964"  class="d1" onclick="getcategory('all',1)">all</div>                </li>                <{section name=s loop=$getlistcategory}>                <{if ($smarty.section.s.index)%6==0 && $smarty.section.s.index!=0}>                <li style="margin-left:110px;">                    <div style="cursor:pointer;" class="d2" onclick="getcategory('<{$getlistcategory[s].title_en}>',1)"><{$getlistcategory[s].title_en}></div>                </li>                <{else}>                <li>                    <div style="cursor:pointer" class="d2" onclick="getcategory('<{$getlistcategory[s].title_en}>',1)"><{$getlistcategory[s].title_en}></div>                </li>                <{/if}>                <{/section}>            </ul>        </div>
登录后复制

<script>    function getcategory(category,page){    ...................   //改变选项颜色   ..................    }</script>
登录后复制

Cutout老照片上色
Cutout老照片上色

Cutout.Pro推出的黑白图片上色

Cutout老照片上色 20
查看详情 Cutout老照片上色


回复讨论(解决方案)

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

把选择项包起来
在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>
登录后复制





  •            
    All

      



  •            
    1

      

  • <script> <br /> function getCategory(id) <br />{ <br /> $(".d3").each(function() <br /> { <br /> $(this).removeClass("show"); <br /> }) <br /> $("#div"+id).addclass("show") <br />} <br /></script>
    最佳 Windows 性能的顶级免费优化软件
    最佳 Windows 性能的顶级免费优化软件

    每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号