SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Conspiracy's Avatar
    Join Date
    May 2002
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alter class with JS... How to...

    Ok, I have this script here:

    var temp;
    function abrediv(id){

    if(temp != undefined){
    if( document.getElementById("div_"+id).style.display == "none"){
    // +
    document.getElementById("div_"+temp).style.display = "none";
    document.getElementById("img_"+temp).src = "img/plus.jpg";

    // -
    document.getElementById("div_"+id).style.display = "block";
    document.getElementById("img_"+id).src = "img/minus.jpg";


    And in the html, it is used like this:


    <a href="javascript:abrediv('1');" class="menuItem_0"><img id="img_1" src="img/plus.jpg" width="9" height="9" border="0">&nbsp;&nbsp;Menu Item</a>

    Now, the script only changes the image and the display (block or none), now how can I add a class change? Like when the display is set to block, assign one class to the anchor and when is set to none, assign a different one?

    I'm not big in js, that is why I need help, actually not big would be an understatement, I'm terrible....

    Thanks anyway....

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var temp;
    function abrediv(id){
      if (temp != undefined){
        if (document.getElementById("div_"+id).style.display == "none") {
          document.getElementById("div_"+temp).style.display = "none";
          document.getElementById("img_"+temp).src = "img/plus.jpg";
          document.getElementById("div_"+id).style.display = "block";
          document.getElementById("img_"+id).src = "img/minus.jpg";
          document.getElementById("a_"+id).className = "newclass";
        }
      }
    }
    In your HTML:
    Code:
    <a href="#" class="menuItem_0" id="a_1" onclick="abrediv('1');"><img id="img_1" src="img/plus.jpg" width="9" height="9" border="0">&nbsp;&nbsp;Menu Item</a>
    Also, you should give the height and width of your img with units (px most likely). Or don't do it at all, the browser can see what size it is, unless you're resizing it from its original size.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •