[kevin_911]

Hi Guys,

I have a tab menu item which onclick hides and shows a div.

Now I have a class which adds style to a active tab.

I am not able to figure out on how to do add this class when a user clicks on it?

Please advice......

Here is my code:

var showid = "div1";
function doInit(id) {                      
   document.getElementById(showid).style.display = "none";
   document.getElementById(id).style.display = "";			
   showid = id;                                  
}

HTML

<div class="Tab"> <a href="#" onclick="doInit('div1');">Tab1</a> </div>
<div class="Tab"> <a href="#" onclick="doInit('div2');">Tab2</a> </div>
<div class="Tab"> <a href="#" onclick="doInit('div3');">Tab3</a> </div>
<div class="Tab"> <a href="#" onclick="doInit('div4');">Tab4</a> </div>
<div style="clear: both;"></div>

CSS

a.active
{
    font-weight: bold;
    font-size: 12px;
    color: #68A710;
    background: url('../img/tabbg-on.png') top no-repeat;
    position: relative;
}

This post has been edited by kevin_911: 08 August 2012 - 12:13 AM

[e_i_pi]

There's a couple of problems here. Firstly you don't have IDs on any of your elements, so the object document.getElementById(showid) is going to be null every time. Secondly, your function code is missing semi-colons at the end of each line. Thirdly, you need to start using a debugging tool like Firebug for Firefox, otherwise your JS development will be hit-and-miss, and it will take ages to write anything.

[kevin_911]

e_i_pi, on 07 August 2012 - 08:09 PM, said:

There's a couple of problems here. Firstly you don't have IDs on any of your elements, so the object document.getElementById(showid) is going to be null every time. Secondly, your function code is missing semi-colons at the end of each line. Thirdly, you need to start using a debugging tool like Firebug for Firefox, otherwise your JS development will be hit-and-miss, and it will take ages to write anything.

Thanks for the advice 'e_i_pi', I forgot to add semicolon's when I was posting this questions
But I am using semicolons in my actual code.

e_i_pi, on 07 August 2012 - 08:09 PM, said:

There's a couple of problems here. Firstly you don't have IDs on any of your elements, so the object document.getElementById(showid) is going to be null every time.

I do have id for the div's 1,2, 3 and 4 but again I should have posted the HTML

<div id="div1">Some test text in div1</div>
<div id="div2">Some test text in div2</div>
<div id="div3">Some test text in div3</div>
<div id="div4">Some test text in div4</div>

So I call the divs when a tab is clicked on. It works flawlessly but am not able to figure out on how to add an additional class style for an active tab?

[e_i_pi]

Well in that case you need to use the setAttribute() method. When adding a class though, you'll need to add two different attributes, one for IE, one for everyone else:

var newClass = "MyClassName";
element.setAttribute("class", newClass); // Most Browsers
element.setAttribute("className", newClass); // IE;

[kevin_911]

e_i_pi, on 08 August 2012 - 02:41 AM, said:

Well in that case you need to use the setAttribute() method. When adding a class though, you'll need to add two different attributes, one for IE, one for everyone else:

var newClass = "MyClassName";
element.setAttribute("class", newClass); // Most Browsers
element.setAttribute("className", newClass); // IE;

Hi Thanks for the reply!!!

Well I changed my javascript as it was confusing me.

Javascript

function showHide(id) {
   var state = document.getElementById(id).style.display;
   if (state == "block") {
      document.getElementById(id).style.display = 'none';
   } else {
      document.getElementById(id).style.display = 'block';
      document.getElementById('id of the tab div').setAttribute("class", "active");
   }
}

Two questions please:

1. Problem with the above code is it doesn't hide the tabs which haven't been clicked on?
2. Do I put the setAttribute(); in the else statement as shown above?

This post has been edited by kevin_911: 08 August 2012 - 02:23 AM

[e_i_pi]

Now your Javascript is confusing me too. You need to post all of the code you have in order to replicate a problem, and it is piecemeal over about 3 posts at the moment.

Also, you would also probably benefit from writing pseudo-code/comments in order to brainstorm what you have to do, like this:

function showHide(id)
{
  // if(id is currently clicked id)
  //   do nothing
  // else
  //   change the active tabs to inactive
  //   hide the active text
  //   change the currently clicked id to active
  //   display the currently clicked id text
}

That way, you can see exactly what you need to do.

Also, you might want to look into jQuery, as these sort of UI problems are easily solved with the tiniest amount of jQuery UI code.

[kevin_911]

e_i_pi, on 08 August 2012 - 03:53 PM, said:

Now your Javascript is confusing me too. You need to post all of the code you have in order to replicate a problem, and it is piecemeal over about 3 posts at the moment.

Also, you would also probably benefit from writing pseudo-code/comments in order to brainstorm what you have to do, like this:

function showHide(id)
{
  // if(id is currently clicked id)
  //   do nothing
  // else
  //   change the active tabs to inactive
  //   hide the active text
  //   change the currently clicked id to active
  //   display the currently clicked id text
}

That way, you can see exactly what you need to do.

Also, you might want to look into jQuery, as these sort of UI problems are easily solved with the tiniest amount of jQuery UI code.

Thanks again for the advice.

I can do this flawlessly in jquery but due to requirements, I have to write it in plain javascript. I am quite use to jquery and reason why struggling with javascript, perhaps its a good reason for me to do some book reading

Anyways I was able to solve the problem using the pseudo technique you mentioned previously.

Thanks

This post has been edited by kevin_911: 09 August 2012 - 01:49 AM