通过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>

但它不起作用。

请有人帮助我。

提前致谢 古勒杰

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

试试这个：

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

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

    })
})

Answer 4

将此添加到您的锚标记 href

javascript:addClass(this)

在javascript中定义这个函数

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