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');

    })
})

通过javascript更改锚标记的css类

4 个答案: