选项框的颜色-tutorial php-php.cn

选项框的颜色

WBOY

Lepaskan： 2016-06-23 13:22:21

asal

1123 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

回复讨论(解决方案)

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

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

用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>

Salin selepas log masuk

All