tab切换背景图html
时间: 2023-07-18 13:12:56 浏览: 48
你可以使用CSS来实现tab切换背景图。首先,在HTML中创建一个带有tab选项卡的容器,然后为每个选项卡创建一个独立的div,并在CSS中给每个div添加不同的背景图像。接着,使用JavaScript来控制tab选项卡的切换事件,当用户点击不同的选项卡时,切换到相应的div。以下是一个示例代码:
HTML代码:
```html
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
<div id="tab1" class="tabcontent"></div>
<div id="tab2" class="tabcontent"></div>
<div id="tab3" class="tabcontent"></div>
```
CSS代码:
```css
.tabcontent {
display: none;
background-image: url('tab1-bg.jpg');
}
#tab2 {
background-image: url('tab2-bg.jpg');
}
#tab3 {
background-image: url('tab3-bg.jpg');
}
```
JavaScript代码:
```javascript
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
```
在这个示例中,我们为每个tab选项卡创建了一个单独的div,并在CSS中为每个div设置了不同的背景图像。在JavaScript中,我们使用openTab函数来控制tab选项卡的切换事件,并在每个选项卡被点击时显示相应的div和背景图像。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)