tab点击让tab里面icon图片变颜色
时间: 2023-06-05 12:08:39 浏览: 51
这个问题属于技术问题,可以给出解答。通常实现tab选中后icon图片变色的做法是CSS样式控制,可以使用:hover伪类、:active伪类、:focus伪类等实现。具体实现方法还需要根据具体的网站或应用来确定。
相关问题
写一个例子 tab点击让tab里面icon图片变颜色
好的,下面是一个实现tab点击让tab里面icon图片变颜色的例子代码:
HTML部分:
```
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'home')">
<img src="home.png" id="home-icon">
Home
</button>
<button class="tablinks" onclick="openTab(event, 'about')">
<img src="about.png" id="about-icon">
About
</button>
</div>
<div id="home" class="tabcontent">
<h3>Home Page</h3>
<p>This is the home page content</p>
</div>
<div id="about" class="tabcontent">
<h3>About Page</h3>
<p>This is the about page content</p>
</div>
```
CSS部分:
```
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
```
JS部分:
```
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", "");
tablinks[i].querySelector("img").style.filter = "grayscale(100%)";
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
evt.currentTarget.querySelector("img").style.filter = "none";
}
```
注意,在CSS中,我们使用了CSS滤镜来处理图标的颜色。在JS中,我们通过添加或移除CSS类来实现选项卡的切换,然后使用querySelector和style属性来更改图标的滤镜颜色。
el-tab-pane label 如何添加icon
要为el-tab-pane的label添加icon,你可以按照以下步骤进行操作:
1. 首先,根据中提供的代码实现,你需要在el-tabs的html部分添加一个自定义的图标元素,可以使用`<i>`标签,然后为该元素添加一个用于显示图标的类名,比如`el-icon-basic-on`。
2. 接着,你需要在style部分的代码中定义一个与该图标对应的样式,例如`.el-icon-basic-on`。
3. 在这个样式中,你可以设置图标的显示方式、宽度、高度以及背景图片的路径。你可以使用`background`属性,并使用`url()`函数来引入对应的svg文件,比如`background: url('../images1/icon/BASIC_ON.svg') no-repeat top;`。
4. 根据需要,你可以按照相同的方式为其他的el-tab-pane添加不同的图标样式,比如`.el-icon-basic-off`。
通过以上步骤,你就可以成功为el-tab-pane的label添加icon了。记得根据需要,为每个不同的图标样式定义不同的类名,并在html部分将这些类名应用到对应的el-tab-pane元素上。希望对你有所帮助!