当处于活动状态时，我如何删除文本修饰.我有以下代码，但链接带有下划线

How could I remove the text-decoration when is active. I have the following code but the link is underlined

本文关键字：下划线 代码 文本 链接 删除 活动状态 何删除      更新时间：2023-09-26

我的问题的HTML代码。

这是一个基于 javascript 的选项卡列表。当我单击其中一个选项卡时，链接仍然保持下划线，即使我编码了文本装饰：none。

<ul class="tabet">
<li class="tab_selected">
<a href="#your-tab-id-1"><div class="vitetdesign">
<p>1 year @</p>
<strong>$399.99</strong> 
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-2"><div class="vitetdesign">
<p>2 years @</p>
<strong>$399.7</strong>
<p>per year</p>
</div></a>
</li>
<li>
<a href="#your-tab-id-3"><div class="vitetdesign">
<p>3 years @</p>
<strong>$396.7</strong>
<p>per year</p>
</div></a>
</li>
</ul>

我的问题的 CSS 代码。

css 从列表的样式开始，直到链接。

.tabet
{
float:left;
margin-top:5%;
margin-left:12%;
position:relative;
width:80%;
}
.tabet li  
{
display:inline;
margin: 2% 0 2% 5%;
float:left;
position:relative;
text-align:center;
}
.tabet li a
{
font-size:20px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
text-align:center;
color:#FB5E2C;
}
.tabet li a:hover
{
text-decoration:none;
text-align:center;
}
.tabet li a:active
{
color:#000;
text-decoration:none;
background-color:#CF0;
}
.vitetdesign
{
border:1px solid #178b1d;
padding:2% 5%;
background-color:#ececec;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:120px;
}
.vitetdesign:hover
{
border:1px solid #454545;
padding:2% 5%;
background-color:#cecece;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.vitetdesign:active
{
background-color:#cecece;
border:1px solid #454545;
text-decoration:none!important;
}

必须设置文本修饰：类中无 tabet li a

.CSS

.tabet li a
{
font-size:20px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
text-align:center;
color:#FB5E2C;
text-decoration: none;
}

在这里演示

使用焦点小提琴

.tabet li a:focus {
color:#000;
text-decoration:none;
background-color:#CF0;
}


.tabet {
    float:left;
    margin-top:5%;
    margin-left:12%;
    position:relative;
    width:80%;
}
.tabet li {
    display:inline;
    margin: 2% 0 2% 5%;
    float:left;
    position:relative;
    text-align:center;
}
.tabet li a {
    font-size:20px;
    font-family:'Source Sans Pro', FontAwesome, sans-serif;
    text-align:center;
    color:#FB5E2C;
}
.tabet li a:hover {
    text-decoration:none;
    text-align:center;
}
.tabet li a:active {
    color:#000;
    text-decoration:none;
    background-color:#CF0;
}
.tabet li a:focus {
    color:#000;
    text-decoration:none;
    background-color:#CF0;
}
.vitetdesign {
    border:1px solid #178b1d;
    padding:2% 5%;
    background-color:#ececec;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:120px;
}
.vitetdesign:hover {
    border:1px solid #454545;
    padding:2% 5%;
    background-color:#cecece;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.vitetdesign:active {
    background-color:#cecece;
    border:1px solid #454545;
    text-decoration:
}
<ul class="tabet">
    <li class="tab_selected">
<a href="#your-tab-id-1"><div class="vitetdesign">
<p>1 year @</p>
<strong>$399.99</strong> 
<p>per year</p>
</div></a>
    </li>
    <li>
<a href="#your-tab-id-2"><div class="vitetdesign">
<p>2 years @</p>
<strong>$399.7</strong>
<p>per year</p>
</div></a>
    </li>
    <li>
<a href="#your-tab-id-3"><div class="vitetdesign">
<p>3 years @</p>
<strong>$396.7</strong>
<p>per year</p>
</div></a>
    </li>
</ul>

a:focus, a:active, a:visited {
    text-decoration : none;
}

如果你根本不需要下划线，那么像这样输入 css

.tabet li a
{
     text-decoration:none;
}
.tabet li a:hover
{
     text-decoration:none;
}
you can add other styles as u wish such as color , font-family etc
相关文章：