Show Hide tag by class in javascript (with and without JQuery)

UPADTED: After examining another working example, I decided to try a JQuery aproach. So I updated the code accordingly. I am sure there is a 3 lines way to get what I did with 300.

The first 3 anchors has a javascript functions that shows 3 texts: T1, T2 and T3, each one by time. The last 2 anchors shows and hides the tag class ET (extra text).

<style type="text/css">
.active{color:red;}
.T2,.T3{display:none;}
</style>

<ul>
<li><a href="#" id="mary">Show Text 1</a> | <a href="#" id="sonya">Show Text 2</a> | <a href="#" id="katty">Show Text 3</a></li>
<li><a href="#" id="short">Hide Text 4</a> | <a href="#" id="long">Show Text 4</a></li>
</ul>

<h1><span class="T1">Hi, I am Mary</span><span class="T2">Hi, I am Sonya</span><span class="T3">Hi, I am Katty</span></h1>
<h2><span class="T1">I love apples</span><span class="T2">I love oranges</span><span class="T3">I love bannanas</span></h2>
<h3><span class="T1">And singing</span><span class="T2">And swimming</span><span class="T3">And walking</span></h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p><span class="ET">Vestibulum hendrerit justo eu leo.</span></p>

This is what I could picture without knowing JQuery at all:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#mary, #long').addClass('active');
    $('#mary').click(function(event){
        event.preventDefault();
        $('.T2, .T3').hide();
        $('.T1').show();
        $(this).addClass('active');
        $('#katty, #sonya').removeClass('active');
    });
    $('#sonya').click(function(event){
        event.preventDefault();
        $('.T1, .T3').hide();
        $('.T2').show();
        $(this).addClass('active');
        $('#mary, #katty').removeClass('active');
    });
    $('#katty').click(function(event){
        event.preventDefault();
        $('.T1, .T2').hide();
        $('.T3').show();
        $(this).addClass('active');
        $('#mary, #sonya').remo开发者_如何学运维veClass('active');
    });
    $('#short').click(function(event){
        event.preventDefault();
        $('.ET').hide();
        $(this).addClass('active');
        $('#long').removeClass('active');
    });
    $('#long').click(function(event){
        event.preventDefault();
        $('.ET').show();
        $(this).addClass('lumi');
        $('#short').removeClass('lumi');
    });
});
</script>

---

I can't really seem to know what's wrong in your code, but may i ask why are you modifying the stylesheet? I mean ..if i were to do that, i would try a different approach : do not modify the stylesheet, but attach new styles to the element.
The thing is that you can have multiple stylsheets with multiple css declarations for the same element(s) that can overwrite each other. In that case, your functions won't have the tiniest chance of working.
I would implement something like :

function modifyDisplay(className,display){
//display is a boolean indicating weather to display the class or to hide it
  var el = document.getElementsByTagName('span');
  for(var i=0,l=el.length;i<l;i++)
    {
      var classes = el.getAttribute('class').split(' ');
      var hasClass = false;
      for(var c in classes)
        if(classes[c] == className)
          {
            el.style.display = display ? "inline" : "none";
            hasClass = true;
            break;
          }
      if(!hasClass)
        el.style.display = !display ? "inline" : "none";
    }
}

and then you could create "shortcuts" to hide & show :

var show = function(className){
   return modifyDisplay(className,true);
};
var hide = function(className){
   return modifyDisplay(className,false);
};  

And, of course if you are willing to take a peak at what javascript libs can do, in jquery all this could be written as following :

function show(className){
  $('span').hide();
  $('.'+className).show();
}

Oh, and another thing, when you declare a function or a variable (with or without the "var" keyword) in a globals scope, it will automatically be attached to the "window" object. There is no need for you to explicitly do so.
Sorry if i got carried away; I hope that this was what you were looking for.

---

It looks like you're attempting to prototype the Javascript Window object with some new functions, which I don't think is possible. Just define them as functions and you should get better results.