Изменить CSS класс тега привязки с помощью JavaScript

Question

У меня есть список в моей странице, как это,

<ul id="breadcrumbs" class="breadcrumbs-two"> 
     <li><a href="#" class="current" id="a1">Step1</a></li> 
     <li><a href="#" id="a2">Step2</a></li> 
     <li><a href="#" id="a3">Step3</a></li> 
     <li><a href="#" id="a4">Step4</a></li> 
     <li><a href="#" id="a5">Complete</a></li> 
    </ul> 

Теперь я хочу, чтобы добавить некоторые CSS класс тега по нажатию некоторой кнопки ссылки.

CSS класс:

.breadcrumbs-two .current 
    { 
     background: #99db76; 
    } 

    .breadcrumbs-two .current, .breadcrumbs-two .current:after 
    { 
     border-left-color: #99db76; 
    } 

    .breadcrumbs-two .current, .breadcrumbs-two .current:before 
    { 
     border-color: #99db76 #99db76 #99db76 transparent; 
    } 

Как я могу это сделать?

Я попытался с этим

function addClass(dis) { 
     dis.className += "current"; 
    } 

<li><a href="javascript:addClass(this)" id="a1">Step1</a></li> 

    <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="addClass('a1')">Done</asp:LinkButton> 

но не работает.

Пожалуйста, помогите мне.

Заранее спасибо Gulrej

Answer 1

Вы можете дать различные цвета и CSS на основе активной, посещаемой, парение, связь и т.д ..

a { 
    outline: 0; 
    text-decoration: underline; 
} 

a:link { 
    color: #0099FF; 
} 

a:visited { 
    color: #0099FF; 
} 

a:hover { 
    color: #FFFF00; 
} 

a:active { 
    color: #33FF66; 
} 

Answer 2

добавить к вашему якорному тегу HREF

javascript:addClass(this) 

Определите эту функцию в JavaScript

function addClass(dis) 
{ 
    dis.className = dis.className + ' yourclass'; 
} 

Answer 3

Попробуйте это:

$(document).ready(function(){ 
    $('.breadcrumbs-two a').click(function(){ 

     $('.breadcrumbs-two a').removeClass('current'); 
     $(this).addClass('current'); 

    }) 
}) 

Answer 4

Если ваш вопрос меню навигации, вы можете попробовать это за это то, что я сделал с моим текущим проектом в настоящее время.

$('.breadcrumbs-two li a').click(function(){ 
     $(this).parent().parent().children('li').removeClass('current'); 
     $(this).addClass('current'); 
}); 

После нажатия одной ссылки, он будет удалить выбранный CSS ссылки и поставить .current класс на вновь щелкнул или выбранной ссылке.

---

Я думал <li> теги тот, который будет нажата. Возможно, вы можете попробовать этот вариант:

$.fn.breadcrumb = function(content, title){ 
    $(this).parent().parent().children('li').removeClass('current'); 
    $(this).addClass('current'); 
}; 

$('#LinkButton1').click(function(){ 
    $(this).breadcrumb(); 
});