Refactoring and assessment

I'm using javascript to toggle the display state of some objects based on the time of day. A sample of the code is given below. I was wondering if anyone could give a suggestion as to how I can refactor this code while at the same time improving the logic.

switch(tcode) {             
            case 'eur'     : eur.setAttribute('style', 'display:block; opacity:0.5');
                             us.style.display   = 'none';
                             asia.style.di开发者_运维百科splay = 'none';
                             us_inactive.style.display   = 'block';
                             asia_inactive.style.display = 'block';
            break;

            case 'us'      : us.style.display   = 'block';
                             eur.style.display  = 'none';
                             asia.style.display = 'none';
                             eur_inactive.style.display  = 'block';
                             asia_inactive.style.display = 'block';

            break;

            case 'asia'    : asia.setAttribute('style', 'display:block; opacity:0.5');
                             us.style.display   = 'none';
                             eur.style.display  = 'none';
                             eur_inactive.style.display  = 'block';
                             us_inactive.style.display = 'block';

---

If you are just toggling the display of some elements (without fancy animations) you could use CSS to simplify the javascript code.

I assume an html structure like this:

<div id="wrapper">
  ...
  <div id="eur">...</div>
  <div id="us">...</div>
  <div id="asia">...</div>

  <div id="eur_inactive">...</div>
  <div id="us_inactive">...</div>
  <div id="asia_inactive">...</div>
  ...
</div>

As far as I understood, there are three viewstates, namely eur us asia which are at the moment handled in the switch statement.

Based on this, you define the different viewstates in your stylesheet like this:

/* eur */
.viewstate-eur {
}

  .viewstate-eur #eur { display:block; opacity:0.5; }

  .viewstate-eur #us,
  .viewstate-eur #asia { display:none; }

  .viewstate-eur #us_inactive,
  .viewstate-eur #asia_inactive { display:block; }

/* us */
.viewstate-us {
}

  .viewstate-us #us { display:block; }

  .viewstate-us #eur,
  .viewstate-us #asia { display:none; }

  .viewstate-us #eur_inactive,
  .viewstate-us #asia_inactive { display:block; }

/* asia */
.viewstate-asia {
}

  .viewstate-asia #asia { display:block; opacity:0.5; }

  .viewstate-asia #us,
  .viewstate-asia #eur { display:none; }

  .viewstate-asia #us_inactive,
  .viewstate-asia #eur_inactive { display:block; }

And your javascript code boils down to setting the correct viewstate via the className property of div#wrapper.

// assuming tcode is one of eur, us, asia
document.getElementById('wrapper').className = 'viewstate-' + tcode;

I always prefer defining CSS styles in the stylesheet and assign them using the class or id attribute rather then setting them directly via javascript if possible. Makes the javascript code cleaner and puts the CSS where it belongs (in the stylesheet). Not sure if your stylesheet validates because of the opacity property though.