Template:TabbedMenu

From OpenWetWare
Jump to: navigation, search

<html><style type="text/css">

  1. tabs {float:left; width:100%; background:</html>{{{bgColor}}}<html>; font-size:93%; line-height:normal;}
  2. tabs ul {margin:0; padding:10px 10px 0 50px; list-style:none;}
  3. tabs li {display:inline; margin:0; padding:0;}
  4. tabs a {float:left; background:url("</html>{{{leftImage}}}<html>") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;}
  5. tabs a span {float:left; display:block; background:url("</html>{{{rightImage}}}<html>") no-repeat right top; padding:5px 15px 4px 6px; color:</html>{{{linkColor}}}<html>;}
  6. tabs a span {float:none;}
  7. tabs a:hover span {color:</html>{{{hoverColor}}}<html>;}
  8. tabs a:hover {background-position:0% -42px;}
  9. tabs a:hover span {background-position:100% -42px;}

</style><div id="tabs"><ul></html> <html><li><a href="#" onclick="turnOn('</html>tab1<html>')" title="</html>Link 1<html>"><span></html>Link 1<html></span></a></li></html><html><li><a href="#" onclick="turnOn('</html>tab2<html>')" title="</html>Link 2<html>"><span></html>Link 2<html></span></a></li></html><html><li><a href="#" onclick="turnOn('</html>tab3<html>')" title="</html>Link 3<html>"><span></html>Link 3<html></span></a></li></html><html><li><a href="#" onclick="turnOn('</html>tab4<html>')" title="</html>Link 4<html>"><span></html>Link 4<html></span></a></li></html><html><li><a href="#" onclick="turnOn('</html>tab5<html>')" title="</html>Link 5<html>"><span></html>Link 5<html></span></a></li></html><html><li><a href="#" onclick="turnOn('</html>tab6<html>')" title="</html>Link 6<html>"><span></html>Link 6<html></span></a></li></html><html><li><a href="#" onclick="turnOn('</html>tab7<html>')" title="</html>Link 7<html>"><span></html>Link 7<html></span></a></li></html> <html></ul></div></html> <html><div style="display:none" class="tabContent" id="</html>tab1<html>"></html>Link 1<html></div></html> <html><div style="display:none" class="tabContent" id="</html>tab2<html>"></html>Link 2<html></div></html> <html><div style="display:none" class="tabContent" id="</html>tab3<html>"></html>Link 3<html></div></html> <html><div style="display:none" class="tabContent" id="</html>tab4<html>"></html>Link 4<html></div></html> <html><div style="display:none" class="tabContent" id="</html>tab5<html>"></html>Link 5<html></div></html> <html><div style="display:none" class="tabContent" id="</html>tab6<html>"></html>Link 6<html></div></html> <html><div style="display:none" class="tabContent" id="</html>tab7<html>"></html>Link 7<html></div></html> <html><script type="text/JavaScript">turnOn('tab1')</script></html>