Question

<nav>
<ul>
<li><a id ="current" href="Default.aspx">A</a></li>
<li><a href="suppliers.aspx">B</a></li>
<li><a href="ServiceLocation.aspx"> C</a></li>
<li><a href="Default3.aspx"> D</a></li>
<li><a href="jobs.html"> E</a></li>
<li><a href="contactus.aspx"> F</a></li>
</ul>
</nav>

我有这样的菜单标签a link我想将id =“current”更改为标签。例如，如果用户点击并且他在页面C上，则id = current必须在C中。

全部谢谢

Answer 1

我可以看到你正在使用asp，所以你可以使用一些逻辑来检查当前的url并为链接分配id或class。

另一种方法是使用jquery动态地执行此操作。虽然在你的情况下，asp是最好的方法。

//HTML
<nav>
<ul>
<li><a id ="A" href="Default.aspx">A</a></li>
<li><a id ="B" href="suppliers.aspx">B</a></li>
<li><a id ="C" href="ServiceLocation.aspx"> C</a></li>
<li><a id ="D" href="Default3.aspx"> D</a></li>
<li><a id ="E" href="jobs.html"> E</a></li>
<li><a id ="F" href="contactus.aspx"> F</a></li>
</ul>
</nav>

//jquery
$('nav ul li a').removeClass('current');
if (window.location.href.indexOf("Default.aspx") > -1) {
    $('nav ul a#A').addClass('current');
}elseif (window.location.href.indexOf("suppliers.aspx") > -1) {
    $('nav ul a#B').addClass('current');
}
//Css 
Just copy the same styling form #current to .current

Answer 2

改变身份证非常疯狂。如果不是真的需要（可能是100％的情况），我建议使用另一个属性来选择当前元素。例如html5中的class，甚至自定义data-。看看这里：http://www.w3schools.com/tags/att_global_data.asp

Answer 3

你最好使用一个类，但这应该做你想要的：

<script>
$( "a" ).click(function() {
    $('#current').attr('id',''); // clear old current
    $( this ).attr('id', 'current'); // set new current
});
</script>

Answer 4

正如其他人所说，你应该使用一个课而不是一个id，除非你有充分的理由。

以下是更改ID

的代码

$( "li > a" ).click(function() {
  $('#current').removeAttr( 'id','current'); 
  $( this ).attr('id', 'current');
});

或代课..

$( "li > a" ).click(function() {
  $('.current').removeAttr( 'class','current'); 
  $( this ).attr('class', 'current');
});

这是您修改过的jsfiddle http://jsfiddle.net/39rc2Le5/2/

<强>更新

如果您使用该课程，您将拥有类似的内容......

<nav>
    <ul>
        <li><a class="current" href="#">A</a>
        </li>
        <li><a class="" href="#3">B</a>
        </li>
        <li><a class="" href="#"> C</a>
        </li>
        <li><a class="" href="#"> D</a>
        </li>
        <li><a class="" href="#"> E</a>
        </li>
        <li><a class="" href="#"> F</a>
        </li>
    </ul>
</nav>

然后，a#current属性当前设置样式的标签将由a.current属性设置样式。所以改变你的css选择器。

 nav ul li a.current {
      background-color: #F9F9F9;
      border-style: solid;
      border-color: #ee1d78;
      border-top: 15px;
      border-left: none;
      border-right: none;
  }

更改html中标记的ID值

4 个答案: