Change The ID value for the a tag in 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>

I have menu tab like this a link I want to change the id="current" to the tab im in. for example if user clicks and he is on page C the id=current must be in C.

Thanks all

I guess you should rather change the **class**. – void Feb 21 '15 at 21:03 — void, Feb 21 '15 at 21:03

Omer Farooq · Answer 1 · 2015-02-21T21:24:25.710

0

I can see you are using asp, so you can just use some logic to check the current url and assign id or class to the link.

Another way would be to use jquery to do this dynamically. Although asp is the best way to do it in your case.

//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

edited Feb 21 '15 at 21:24

answered Feb 21 '15 at 21:05

Omer Farooq

3,754
6
31
60

You can do this with JS as well.. :P – void Feb 21 '15 at 21:06
Hi Omar , I do the same thing and add the jquery.min.js link. but not working for me , – user2274204 Feb 21 '15 at 21:39
Try wrapping the code within tags and then add them to your footer file after jquery.min.js. – Omer Farooq Feb 21 '15 at 23:02

score 0 · Answer 2 · answered Feb 21 '15 at 21:12

0

Very crazy idea to change ID. If it is not really needed (probably 100% of cases), I suggest to use another property to select current element. For example class, or even custom data- in html5. Take a look here: http://www.w3schools.com/tags/att_global_data.asp

answered Feb 21 '15 at 21:12

garbus

84
8

Just like here: http://stackoverflow.com/questions/3452778/jquery-change-class-name – garbus Feb 21 '15 at 21:35

score 0 · Answer 3 · answered Feb 21 '15 at 21:13

0

You're better off using a class for this, but this should do what you want:

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

answered Feb 21 '15 at 21:13

Brandon Smith

1,197
9
13

Assuming you have access to jQuery. – Brandon Smith Feb 21 '15 at 21:14

skribe · Answer 4 · 2015-02-21T21:36:14.253

As others have said you should probably use a class rather than an id, unless you have a very good reason for it.

Here is the code for changing the id

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

or the class instead..

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

And here is your modified jsfiddle http://jsfiddle.net/39rc2Le5/2/

Update

If you use the class instead you will have something like this...

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

Then your tabs which are currently styled by a#current properties would be styled by a.current properties. So change your css selector like this.

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

how can i add class, what you mean by this , can give me example ? — user2274204, Feb 21 '15 at 21:31
I updated the answer. I guess a question to ask is why you want to change the id (or class) to "current" ? Is it to run another script against , or just style with css? — skribe, Feb 21 '15 at 21:37

Change The ID value for the a tag in html

4 Answers4