如何使用css選取器來實現導覽列背景圖的切換？

效果:

html 代碼:

<p class="banner_area"><p class="item"><span class="ck_item one" itemType='jjjz'></span></p><p class="item"><span class="ck_item two" itemType='jdbg'></span></p><p class="item"><span class="ck_item three" itemType='spbj'></span></p><p class="item  cur_item"><span class="ck_item four" itemType='ssnz'></span></p><p class="item "><span class="ck_item fiv" itemType='jpnz'></span></p><p class="item six"><span class="ck_item six" itemType='hfcz'></span></p><p class="item" style="margin-right: 0px;"><span class="ck_item seven" itemType='xbsp'></span></p></p>

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就可以實現效果。