zoukankan      html  css  js  c++  java
  • 有多个按钮,点击一个变色,点击另一个变色,原来的恢复颜色的方法

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

    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     }
  • 相关阅读:
    object-c iOS 教程 git for mac
    mac Git本地服务器配置
    [转]XCode中修改缺省公司名称/开发人员名称
    IOS------Warning
    Linux---CentOS 定时运行脚本配置练手
    微信公众号一些错误的原因错误代码41001
    微信支付的一些新的经验总结
    关于THINKPHP5模型关联的初步理解
    写下thinkphp5和thinkphp3.2的不同
    练手THINKPHP5过程和bootstrap3.3.7
  • 原文地址:https://www.cnblogs.com/liazhimao/p/13826329.html
Copyright © 2011-2022 走看看