利用css选择器的优先级实现导航栏背景图的切换.

效果如图:




html 代码:

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

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')是通过对其父元素div(class="item ") 动态添加和删除类cur_item就可以实现上图效果。