• 有多个按钮,点击一个变色,点击另一个变色,原来的恢复颜色的方法


    该情况一般在点击按钮切换内容的情况中

    2个按钮或者多个按钮进行互相切换内容

    html

     1 <table> 
     2 <tr>
     3                 <td>
     4                     <input class="flag hq_hy" type="submit" οnclick="dj(this);" value="行业" />
     5                 </td>
     6                 <td>
     7                     <input class="flag hq_zsh" type="submit" οnclick="dj(this);" value="指数" />
     8                 </td>
     9                 <td>
    10                     <input class="flag hq_hb" type="submit" οnclick="dj(this);" value="货币" />
    11                 </td>
    12                 <td>
    13                     <input class="flag hq_jyyc" type="submit" οnclick="dj(this);" value="交易异常" />
    14                 </td>
    15                 <td>
    16                     <input class="flag hq_byb" type="submit" οnclick="dj(this);" value="比一比" />
    17                 </td>
    18                 <td>
    19                     <input class="flag hq_lrcl" type="submit" style="" οnclick="dj(this);" value="ETF两融策略" />
    20                 </td>
    21             </tr>
    22         </table>

    css

     1 .hq_hy:hover, .hq_zsh:hover, .hq_hb:hover, .hq_jyyc:hover, .hq_byb:hover, .hq_lrcl:hover
     2   /*鼠标移上去变色(不点击)*/
     3         {
     4             color: #fff;
     5             border-color: #b1b0b0;
     6             background: #b1b0b0;
     7             border: none;
     8         }
     9         
    10         .start
    11         {
    12             cursor: pointer;
    13         }
    14  
    15         .end
    16         {
    17             cursor: pointer;
    18             color: #fff;
    19             background: #b1b0b0;
    20             border: none;
    21         }

    js

     1 $(function () {
     2     //加载事件
     3         var collection = $(".flag");
     4         $.each(collection, function () {
     5             $(this).addClass("start");
     6         });
     7     });
     8     //单击事件
     9     function dj(dom) {
    10         var collection = $(".flag");
    11         $.each(collection, function () {
    12             $(this).removeClass("end");
    13             $(this).addClass("start");
    14         });
    15         $(dom).removeClass("start");
    16         $(dom).addClass("end");
    17     }
  • 相关阅读:
    Mybatis一级缓存和二级缓存总结
    UML模型的基本概念
    Proxy patten 代理模式
    UML 基础:类图
    Java与UML交互图
    Composite Pattern (组合模式)
    用例建模指南
    Prototype Pattern(原型模式)
    Adapter Pattern(适配器模式)
    UML 类与类之间的关系
  • 原文地址:https://www.cnblogs.com/liazhimao/p/13826329.html
Copyright © 2020-2023  润新知