Javascript Tab Void (onclick style/class aanpassen)

[Invenso]

Beste,

Voor de webpagina: http://beta.budgetwitgoed.nl/smeg-fab30g6.was ben ik op zoek naar een manier om via een afbeelding (dus externe link) een tabje te openen.

Het tab systeem bestaat uit twee stukjes, een unordered list en een padder.
De ul bestaat uit li's die bij actief een class: active krijgen en anders een lege class hebben.

De padder bestaat uit vakken die bij standaard op style:"display: none;" staan, bij actief is de "display: none;" weggehaald.

Dit alles wordt geregeld door het volgende stukje Javascript, maar daar ik zelf nog niet zo'n held ben in Javascript wil ik graag aan jullie vragen op welke manier ik dus extern een tabje kan openen (dus de display:none; weghalen en een class:"active" toevoegen).

<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
  initialize: function(selector) {
    var self=this;
    $$(selector+' a').each(this.initTab.bind(this));
  },

  initTab: function(el) {
      el.href = 'javascript:void(0)';
      if ($(el.parentNode).hasClassName('active')) {
        this.showContent(el);
      }
      el.observe('click', this.showContent.bind(this, el));
  },

  showContent: function(a) {
    var li = $(a.parentNode), ul = $(li.parentNode);
    ul.getElementsBySelector('li', 'ol').each(function(el){
      var contents = $(el.id+'_contents');
      if (el==li) {
        el.addClassName('active');
        contents.show();
      } else {
        el.removeClassName('active');
        contents.hide();
      }
    });
  }
}
new Varien.Tabs('.tabs');
</script>

Hoor graag van jullie,
Erik Visser

 

[Invenso]

bump