javascript - 通过 javascript 更改 anchor 标记的 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>

但它不起作用。

请有人帮助我。

提前致谢 古尔雷吉

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