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

深碍√TFBOYSˉ_ 2022-07-15 15:22 80阅读 0赞

效果如图:![Center][]

![Center 1][]

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

[Center]: /images/20220715/1f16f791594b4e15aa89d248c6b343f3.png
[Center 1]: /images/20220715/0e6d958507ba4458850777bbd0c87bc8.png