Home  >  Article  >  Backend Development  >  选项框的颜色

选项框的颜色

WBOY
WBOYOriginal
2016-06-23 13:22:211057browse


默认情况下 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>


回复讨论(解决方案)

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

把选择项包起来
在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>
    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn