效果如图:
html 代码:
css:
立即学习“前端免费学习笔记（深入）”；
.one{background: url(http://img.jiangcdn.com/home/insider/jujz_one.jpg) no-repeat;}
.two{background: url(http://img.jiangcdn.com/home/insider/jdbg_one.jpg) no-repeat;}
.three{background: url(http://img.jiangcdn.com/home/insider/spbj_one.jpg) no-repeat;}
.four{background: url(http://img.jiangcdn.com/home/insider/ssnz_one.jpg) no-repeat;}
.fiv{background: url(http://img.jiangcdn.com/home/insider/jpnz_one.jpg) no-repeat;}
.six{background: url(http://img.jiangcdn.com/home/insider/hfqz_one.jpg) no-repeat;}
.seven{background: url(http://img.jiangcdn.com/home/insider/xbsp_one.jpg) no-repeat;}
.cur_item{width: 218px;height: 53px;}
.cur_item span.one{background: url(http://img.jiangcdn.com/home/insider/jjjz_two.jpg) no-repeat;}
.cur_item span.two{background: url(http://img.jiangcdn.com/home/insider/jdbg_two.png) no-repeat;}
.cur_item span.three{background: url(http://img.jiangcdn.com/home/insider/spbj_two.jpg) no-repeat;}
.cur_item span.four{background: url(http://img.jiangcdn.com/home/insider/ssnz_two.jpg) no-repeat;}
.cur_item span.fiv{background: url(http://img.jiangcdn.com/home/insider/jpnz_two.jpg) no-repeat;}
.cur_item span.six{background: url(http://img.jiangcdn.com/home/insider/hfqz_two.jpg) no-repeat;}
.cur_item span.seven{background: url(http://img.jiangcdn.com/home/insider/xbsp_two.jpg) no-repeat;}我们点击span(class='ck_item')是通过对其父元素p(class="item ") 动态添加和删除类cur_item就可以实现上图效果。
