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

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

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     }

 

posted @ 2020-10-16 14:31  俩只猫  阅读(1983)  评论(0)  编辑  收藏  举报