効果は図に示すとおりです:
html code:
<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 を動的に追加および削除することで、上記の効果を実現できます。
以上がCSSセレクターを使用してナビゲーションバーの背景画像を切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。