cambiando dinámicamente la identificación "onlink" en css

I made a navigation bar as tabs in my website, and I used the onlink identity to specify the current tab with certain characteristics. My problem is that when I change tabs, I don't know how to make the previous tab id set as none and the current one set as onlink.

Here's the navigation bar code:

<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li>
</ul>
</div>
</div>

There's a simple ways but it's somehow stupid, which is to make each current tab as a whole page and when I click another tab, it's just given the url of clicked tab which goes to the page with specified onlink id, but this requires reloading the whole page that's why I'm seeking a better solution.

preguntado el 04 de julio de 12 a las 10:07

5 Respuestas

You can get the control being clicked by passing this in javascript method

onclick="DisplayDIV('IndPage', this);


function DisplayDIV(IndPage, sourceObj)
{
   alert(sourceObj.id);
}

Respondido 04 Jul 12, 11:07

I'm sorry but I didn't understand what this function quite does - Luna28

You wanted to know which tab is being clicked in DisplayDIV? If yes then you will get in the function given above - Adil

Sorry, but I want to do is to make the clicked tab id set as "onlink" and the others set as "none" - Luna28

Are you ok do use the jQuery Library? If so you can avoid putting inline javascript into your html and use toggleClass http://api.jquery.com/toggleClass/

Respondido 04 Jul 12, 10:07

You are trying to use HTML ids in the wrong way.

Ids are unique identifiers for HTML tags. They should not change at runtime.

Instead, apply CSS classes to the tab you want to be visible.

CO

.hide {display:none;}

Javascript

var indpage = document.getElementById("IndPage");
if (!indpage.classList.contains("hide")) {
    indpage.classList.add("hide");
}

Then your HTML at runtime will change to

<div id="IndPage" class="hide">...</div>

This is the standard approach.
And you can do much more with this idea.

I agree that making a tab a whole page is not a good idea. You can use javascript to apply CSS classes to hide and remove that class to show again.

Its also a good idea to learn how to separate your javascript from your HTML. Please read some more tutorials on this. One for instance: Javascript discreto

Respondido 04 Jul 12, 11:07

Here is a jquery way to do it: http://jsfiddle.net/surendraVsingh/HyAhL/

$('#indHolder a').click(function(){

    $(this).attr('id', 'onlink');
     $(this).parent().siblings().find('a').removeAttr('id');
});​

Respondido 04 Jul 12, 11:07

I took hints from the answers above and it worked as the following:

function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}

and the tabs code is:

<div id="indNavBar">
<div id="indHolder">
  <ul>
    <li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li>
    <li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li>
  </ul>
</div>
</div>

I just wanna not that in the second link I had to change the id of the first link twice because it didn't work once, maybe cause its id is set in the tag not just when clicked.

Respondido 04 Jul 12, 11:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.