Question

我有这样的菜单标签：

 <li><a id="current" href="Index.aspx">A</a></li>
 <li><a href="suppliers.aspx">B</a></li>
 <li><a href="RealWedding.aspx">C</a></li>
 <li><a href="About.aspx">D</a></li>
 <li><a href="ContactUs.aspx">E</a></li>

CSS就像这样：

ul#minitabs a#current {
border-color: #EEACAC;
color:#AC2B53
}

如何更改所选的id="current"，而不是第一个的{{1}}。

Answer 1

此代码会根据打开的页面将id设置为current链接。我想这就是你的意思。

window.onload = function(){

  var url = window.location.href;
  url = url.split('/').pop();
  document.querySelector('a[href='+url+']').id="current";

};

Answer 2

改进此代码。并用来改变你的课程等。

$(document).ready(function(){

        $("a").click(function(){

            $(this).addClass('current');            
            console.log($(this).attr('class'));

        });

});

但我相信你的CSS解决方案。

：悬停{attr：属性}

Answer 3

使用jQuery，您可以通过以下操作跟上用户点击的标签：

$('li > a').on('click', function (e) {

    if (!$(this).hasClass('current')) {
        $('li > a').removeClass('current');
        $(this).addClass('current');
    }
    e.preventDefault();

});

我们正在检查当前标签是否没有“当前”类。

这是一个小提琴：http://jsfiddle.net/3ebc7kx2/

更改所选<a> tag</a>的ID

3 个答案: