ezj.ext.tab2

CSS 代码

.tabTitle{overflow:hidden;margin:0px;padding:0px;} .tabTitle .item{float:left;display:inline;width:90px;height:28px; border-bottom:1px solid #fff; background:#fff url('images/tab2.png') no-repeat scroll 50% 0px;color:#000; text-align:center;line-height:28px;font-size:13px; list-style-type:none;cursor:default;} .tabTitle .hover{color:#00f;font-weight:bold;} .tabTitle .cur{border-bottom:1px solid #fff;background:#fff url('images/tab2.png') no-repeat scroll 50% -28px;color:#c00;font-weight:bold;} .tabTitle .separator{float:left;display:inline;width:5px;height:27px;border-bottom:1px solid #dfdfdf; line-height:28px;font-size:13px; list-style-type:none;} .tabContent{clear:both;margin:0px;padding:0px;} .tabContent .item{display:none;list-style-type:none;padding:10px;width:353px; border-right:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;border-left:1px solid #dfdfdf;} .tabContent .cur{display:block;}

HTML 代码

<ul class="tabTitle"> <li class="item cur">商品展示</li> <li class="separator"></li> <li class="item">详细参数</li> <li class="separator"></li> <li class="item">商品评价</li> <li class="separator"></li> <li class="item lastItem">售后服务</li> </ul> <ul class="tabContent"> <li class="item cur">a</li> <li class="item">b</li> <li class="item">c</li> <li class="item">d</li> </ul>

JavaScript 代码（ezj 代码）

ezj.ext.tab2(".tabTitle", ".tabContent", "click", function(index){ if (index == 3) { alert("不允许切换到该标签。"); return false; } }, function(index){ if (index == 2) { alert("成功切换到第 3 个标签。"); } });

演示