有没有办法改变标签颜色和活动标签边框底部的颜色?
问题描述:
这里是我的html:有没有办法改变标签颜色和活动标签边框底部的颜色?
<md-tabs md-dynamic-height >
<div>
<md-tab label="Tab 1">
</md-tab>
<md-tab label="Tab 2" >
</md-tab>
<md-tab label="Tab 3" >
</md-tab>
</div>
</md-tabs>
需要对标签点击时更改标签的颜色和底部边框的颜色。 由于事先
答
“边框底部”它使用<md-ink-bar>
,这里默认选择创建:
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-barr{
color: rgb(255,82,82);
background: rgb(255,82,82);
}
这里的标签有效/无效:
md-tabs .md-tab.md-active{
color: rgb(16,108,200);
}
md-tabs.md-default-theme .md-tab, md-tabs .md-tab{
color: rgba(0,0,0,0.54);
}
对于正确的样式定制您可以创建一个自定义主题,以覆盖标准颜色而不创建自定义CSS,请检查DOC
答
添加脚本和CSS。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("div md-tab").click(function(){
$(this).addClass("active");
});
});
</script>
<style>
.active{
border-bottom: 1px solid #000;
color: #f44336;
}
</style>
谢谢。请稍后再试。 – Serhiy
这不起作用 – mikejones1477
嗨,你的解决方案只有当我添加主题类'.md-default-theme md-ink-bar'时才起作用。 如何设置对任何主题都有效的颜色? TY。 – SkyDancer