其中settings中的model是用来控制切换方式的：
当为”click”时，点击实现切换；
当为”mouseover”时，鼠标滑入实现切换。
开始时是想用hover来实现鼠标滑入切换的，结果发现，hover不支持bind绑定。因为hover是jquery通过封装 mouseover事件 的产物，它并不是一个正宗的事件，因此无法绑定。
下面给出个DEMO：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.tabs
{
width: 504px;
margin: 50px auto;
} .acss,.bcss
{
text-decoration:none;
line-height: 35px;
font-size: 14px;
padding:8px 15px;
}
.bcss
{
background-color: #D4D4D4;
border-bottom:1px solid white;
}
.acss
{
background-color: orange;
border-bottom:1px solid orange;
}
.tabs dd
{
width: 500px;
height: 300px;
border: 1px solid orange;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<dl class="tabs" id="tabs1">
<dt>
<a class="acss" href="#panel-1">标签1</a>
<a class="bcss" href="#panel-2">标签2</a>
<a class="bcss" href="#panel-3">标签3</a>
</dt>
<dd id="panel-1"><h1>鼠标滑入切换</h1></dd>
<dd id="panel-2" style="display:none;">内容2</dd>
<dd id="panel-3" style="display:none;">内容3</dd>
</dl>
<dl class="tabs" id="tabs2">
<dt>
<a class="acss" href="#panel-4">标签1</a><!--默认第一个激活-->
<a class="bcss" href="#panel-5">标签2</a>
<a class="bcss" href="#panel-6">标签3</a>
</dt>
<dd id="panel-4"><h1>鼠标点击切换</h1></dd><!--默认第一个显示-->
<dd id="panel-5" style="display:none;">内容2</dd>
<dd id="panel-6" style="display:none;">内容3</dd>
</dl>
<script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.similar.Tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$("#tabs1").Tabs(); //默认鼠标滑入切换
$("#tabs2").Tabs({model:"click"}); //设置为点击切换
</script>
</body>
</html>
效果图如下：
