简单的Easytabs插件，实现Tab在左侧显示

官方地址：http://os.alfajango.com/easytabs/

觉得这个小插件挺好用，比较简单

• 引入js

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

• 写入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 4px; -webkit-border-radius: 0 4px 4px 4px; }

• 写HTML

<div id="tab-container" class="tab-container">
    <ul class='etabs'>
	<li class='tab'><a href="#tabs1-html">标签一</a></li>
        <li class='tab'><a href="#tabs1-js">标签二</a></li>
    </ul>
    <div id="tabs1-html">
	  标签一的内容
    </div>
    <div id="tabs1-js">
	  标签二的内容
    </div>
</div>

• 使用插件

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

——————————————————————————————————————————————

完成，但是我特别想实现的是Tab在左侧，官网有例子，研究了一下，机关都在CSS中藏着。

• 写入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; }

• 写HTML

<div id="tab-container">
 <ul>
  <li><a href="#side-tab1">标签一</a></li>
  <li><a href="#side-tab2">标签二</a></li>
 </ul>
 <div class="panel-container">
  <div id="side-tab1">
	标签一内容
  </div>
  <div id="side-tab2">
            标签二内容
  </div>
 </div>
</div>

• 使用插件

	$('#tab-container').easytabs({
		animate: false,
		tabActiveClass: "selected-tab",
		panelActiveClass: "displayed"
	});

• 最终效果