如何在活動時刪除文字修飾。我有以下代碼，但鏈接加下劃線

這是一個基於javascript的選項卡列表。當我點擊其中一個標籤時，鏈接仍然有下劃線，即使我編碼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>

我的問題的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; 
}

來源

2015-01-12 MrVampo

使用對焦Fiddle

.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>

來源

2015-01-12 11:35:08 Akshay

您必須設置文本修飾：無類TABET李一

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

來源

2015-01-12 11:36:03

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

來源

2015-01-12 11:47:05

你若不需要強調在所有然後把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

來源

2015-01-12 12:37:13

如何在活動時刪除文字修飾。我有以下代碼，但鏈接加下劃線

回答

相關問題