Изменить значение идентификатора для тега в HTML

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 Я хочу, чтобы изменить идентификатор = «текущий» на вкладке им. Например, если пользователь нажмет и он находится на странице C ид = ток должен быть в С.

Спасибо всем

Answer 1

Я вижу, что вы используете осина, так что вы можете просто использовать определенную логику для проверки текущего URL и назначить идентификатор или класс по ссылке.

Другим способом было бы использовать 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

Очень сумасшедшая идея изменить ID. Если это не нужно (возможно, в 100% случаев), я предлагаю использовать другое свойство для выбора текущего элемента. Например, class, или даже пользовательский data- в html5. Посмотрите здесь: 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, если у вас нет веских оснований для этого.

Вот код для изменения идентификатора

$("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/

Update

Если и использовать класс вместо этого вы будете иметь что-то вроде этого ...

<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; 
    }