javascript - 激活时如何删除文本装饰。我有以下代码，但链接带有下划线

Question

我的问题的 HTML 代码。

这是一个基于 javascript 的选项卡列表。当我单击其中一个选项卡时，链接仍然带有下划线，即使我编码了 text-decoration: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;
}

Answer 1

你必须设置text-decoration: none in class 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;
}

DEMO HERE