javascript - 通过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');

    })
})