How to use css selector to switch the navigation bar background image?

The effect is as shown:

html code:

<p class="banner_area">
<p class="item">
<span class="ck_item one" itemType=&#39;jjjz&#39;></span>
</p>
<p class="item">
<span class="ck_item two" itemType=&#39;jdbg&#39;></span>
</p>
<p class="item">
<span class="ck_item three" itemType=&#39;spbj&#39;></span>
</p>
<p class="item  cur_item">
<span class="ck_item four" itemType=&#39;ssnz&#39;></span>
</p>
<p class="item ">
<span class="ck_item fiv" itemType=&#39;jpnz&#39;></span>
</p>
<p class="item six">
<span class="ck_item six" itemType=&#39;hfcz&#39;></span>
</p>
<p class="item" style="margin-right: 0px;">
<span class="ck_item seven" itemType=&#39;xbsp&#39;></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;}

When we click span(class='ck_item'), we can dynamically add and delete the class cur_item by its parent element p(class="item ") Achieve the effect shown above.

The above is the detailed content of How to use css selector to switch the navigation bar background image?. For more information, please follow other related articles on the PHP Chinese website!