通过JavaScript更改锚标记的CSS类

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

如果您的问题是导航菜单，则可以尝试使用此菜单，因为这是我现在对当前项目所做的。

 $('.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();
});

Answer 2

您可以根据活动的，访问的，悬停的，链接的等来给不同的颜色和CSS。

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

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

Answer 3

将此添加到您的锚标签href

javascript:addClass(this)

在javascript中定义此功能

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

Answer 4

尝试这个：

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

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

    })
})