Simple Easytabs plugin for tab display on the left

Official address: http://os.alfajango.com/easytabs/

Think this small plug-in is very useful, relatively simple

Introducing JS

<script type= "Text/javascript" src= "jquery-1.9.1.min.js" ></script>
<script type= "text/ JavaScript "src=" Jquery.easytabs.min.js "></script>

Write CSS

. etabs {margin:0; padding:0;}
. tab {display:inline-block; zoom:1; *display:inline; background: #eee; border:solid 1px #999; border-bottom:none;-moz- border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; }
. tab a {font-size:14px; line-height:2em; display:block; padding:0 10px; outline:none;}
. tab a:hover {text-decoration:underline;}
. tab.active {background: #fff; padding-top:6px; position:relative; top:1px; Border-color: #666;}
. tab a.active {font-weight:bold;}
. Tab-container. Panel-container {background: #fff; border:solid #666 1px; padding:10px;-moz-border-radius:0 4px 4px 4p X -webkit-border-radius:0 4px 4px 4px; }

Write HTML

<div id= "Tab-container" class= "Tab-container" >
    <ul class= ' etabs ' >
	<li class= ' tab ' ><a href= "#tabs1-html" > label one </a></li>
        <li class= ' tab ' ><a href= ' #tabs1-js ' > label two </a> </li>
    </ul>
    <div id= "tabs1-html" >
	  contents of Tag one
    </div>
    <div id= "Tabs1-js ">
	  Label II content
    </div>
</div>

Using plugins

$ (document). Ready (function () {
	$ (' #tab-container '). Easytabs ({
		animate:false
	});
});

—————————————————————————————————————————————— done, but I particularly want to achieve is the tab on the left, the official website has examples, research, the institutions are hidden in CSS.
Write CSS

	#tab-container {background: #fff; border:solid 1px; height:400px; width:410px}
	#tab-container ul {height:400px; List-style:none; margin:0; padding:0; Background: #ccc; Float:left; Border-right:solid 1px; }
	#tab-container ul li {width:25px; margin:0; padding:0; text-align:center;}
	#tab-container ul Li a {display:block; padding:15px 3px;  Outline:none; }
	#tab-container ul li a:hover {text-decoration:underline;}
	#tab-container ul li.selected-tab {background: #fff;}
	#tab-container ul li:first-child.selected-tab {border-top:none;}
	#tab-container ul Li A.selected-tab {font-weight:bold; text-decoration:none;}
	#tab-container. Panel-container {background: #fff;}

Write HTML

<div id= "Tab-container" >
 <ul>
  <li><a href= "#side-tab1" > Label one </a></li>
  <li><a href= "#side-tab2" > tags two </a></li>
 </ul>
 <div class= " Panel-container ">
  <div id=" SIDE-TAB1 ">
	tag One content
  </div>
  <div id=" SIDE-TAB2 ">
            Label II content
  </div>
 </div>
</div>

Using plugins

	$ (' #tab-container '). Easytabs ({
		animate:false,
		tabactiveclass: "Selected-tab",
		panelactiveclass: " Displayed "
	});

Final effect