function rTeamToggle(containerId, trigger) {
	var triggerId = trigger.id;
	var contentId = 'roster-' + triggerId.substr(2);

	var container = document.getElementById(containerId);
	var contents = container.getElementsByTagName("div");
	for (var i = 0; i < contents.length; i++) {
		var o = contents[i];
		if (o.id == contentId) {
			o.className = 'on';
			o.style.display = 'block;
		}
		else {
			o.className = 'off';
			o.style.display = 'none';
		}
	}
}					

<ul id="r-tabs">
	<li id="r-sc" class="on" onclick="rTeamToggle('roster', this);"></li>
	<li id="r-dow" class="off" onclick="rTeamToggle('roster', this);"></li>
	<li id="r-coh" class="off" onclick="rTeamToggle('roster', this);"></li>
	<li id="r-pw" class="off" onclick="rTeamToggle('roster', this);"></li>
	<li id="r-rol" class="off" onclick="rTeamToggle('roster', this);"></li>
</ul>

<div id="roster">
	<div id="roster-sc" style="display:block;">
		<img src="{$path}i/rosters/sc.jpg" class="block" />
	</div>
	<div id="roster-dow" style="display:none;">
		<img src="{$path}i/rosters/dow.jpg" class="block" />
	</div>
	...
</div>