几种tabbar效果

近来在网上瞎逛的时候,发现了几种talbar的效果不错

在这整理一下,

1.ablibaba上的

主要思想是:通过一个js改变css,事先写好了两种css.一个是没有点中(激活的)情况 .tab ,一个是激活后的 .tabActive.

通过web 元素的id 和class结合.    document.getElementById('id').className='tabactive';

其原码和css贴出如下,

 <style type="text/css">
.listSearch{height:58px;width:400px;font-size:14px;float:left}
.listSearch a:link{font-size:14px;}
.listSearch ul{padding:0px;margin:0px;list-style:none}
.listSearch li{float:left}
.listSearch .listTab{clear:both;height:25px;background-image:url(http://img.china.alibaba.com/images/cn/market/trade/list/tab_sep_bg.gif);}
.listSearch .sep{line-height:24px;color:#cccccc;border-bottom:1px solid #FF9933;text-align:center;}

.listSearch .activeTab{width:51px;line-height:25px;border-left:1px solid #FF9933;border-right:1px solid #FF9933;border-top:1px solid #FF9933;font-weight:bold;text-align:center;margin-left:-1px}
.listSearch .tab{width:50px;padding-top:3px;border-bottom:1px solid #FF9933;text-align:center;}
.listSearch .tab div{line-height:20px;margin-bottom:1px;height:100%; width:50px;}
.listSearch .listSearchBox{border-left:1px solid #FF9933;border-right:1px solid #FF9933;border-bottom:1px solid #FF9933;padding:5px;padding-left:10px}
</style>
<script language="javascript">
function trim(inputString) {

if (typeof inputString != "string") { return inputString; }
var retValue = inputString;
var ch = retValue.substring(0, 1);
while (ch == " ") {
  //检查字符串开始部分的空格
  retValue = retValue.substring(1, retValue.length);
  ch = retValue.substring(0, 1);
}
ch = retValue.substring(retValue.length-1, retValue.length);
while (ch == " ") {
 //检查字符串结束部分的空格
 retValue = retValue.substring(0, retValue.length-1);
 ch = retValue.substring(retValue.length-1, retValue.length);
}
while (retValue.indexOf("  ") != -1) {
 //将文字中间多个相连的空格变为一个空格
 retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length);
}
return retValue;
}

var searchActivedItem=1;
var tracelogStr="";
var otherParamStr="";
function searchInit(num,tracelog,otherParam){
 tracelogStr = tracelog;
 otherParamStr = otherParam;
 doclick(num);
}

function checkform(){
 var v = trim(listSearchfrm.keywords.value);
 if(v.length > 100){
  alert("您输入的关键词过长！");
  return false;
 }
 if(v == ""  || v.substring(0,3) =="请输入") {
  alert("请输入搜索关键词！");
  return false;
 }
 var s ="&";
 if((data[searchActivedItem-1].surl).indexOf("?")==-1)s="?";
 listSearchfrm.action = data[searchActivedItem-1].surl+s+"keywords=" + listSearchfrm.keywords.value +"&tracelog="+tracelogStr+data[searchActivedItem-1].tracelog+otherParamStr;
 
}

function doclick(searchID){  
    var srcObj =  document.getElementById("node" + searchID) ;   
 var tabList = srcObj.parentNode.getElementsByTagName("li"); 
 if(srcObj.className=="activedTab")return;
 for(var i=0;i<tabList.length;i++){    
  if(tabList[i].className=="activeTab") {
     tabList[i].className="tab";
     tabList[i].innerHTML = '<div><a href="javascript:doclick(' + data[i].id + ');">' + data[i].name + '</a></div>'; 
  }
 }
 searchActivedItem = searchID; 
 srcObj.className = "activeTab";
 srcObj.innerHTML = '<div>' + data[searchID - 1].name + '</div>';
 
 var v = trim(listSearchfrm.keywords.value);
 if( v == "" || v.substring(0,3) =="请输入")  {
   listSearchfrm.keywords.value = data[searchID-1].title;
   listSearchfrm.keywords.style.color = "#999";
 } else {  
   if(checkform()!= false) listSearchfrm.submit();  
 }
}

function emptySearchBox(searchbox) {
    if (searchbox.value.substring(0,3) == "请输入") {
      searchbox.value='';     
    }
 listSearchfrm.keywords.style.color = "#000";
}

var data = [
 {id:1,name:"供应",surl:"http://search.china.alibaba.com/search/offer_search.htm" , title:"请输入您感兴趣的产品名称！" , tracelog:"alishopsearch_sale"},
 {id:2,name:"求购",surl:"http://search.china.alibaba.com/search/search.htm" , title:"请输入您感兴趣的产品名称！", tracelog:"alishopsearch_buy"},
 {id:3,name:"产品",surl:"http://search.china.alibaba.com/search/sample_search.htm" , title:"请输入您感兴趣的产品名称！", tracelog:"alishopsearch_sample"},
 {id:4,name:"公司",surl:"http://search.china.alibaba.com/search/company_search.htm" , title:"请输入产品名或公司名关键词！" , tracelog:"alishopsearch_company"},
 {id:5,name:"报价",surl:"http://search.china.alibaba.com/search/business_search.htm" , title:"请输入产品关键词查找相关报价信息！" , tracelog:"alishopsearch_baojia"}, 
 {id:6,name:"资讯",surl:"http://info.china.alibaba.com/news/searchnews?do=true&doSearchNews=true&catcount=10",title:"请输入您感兴趣的关键词，如“创业”“税收”" , tracelog:"alishopsearch_info"},
 {id:7,name:"论坛",surl:"http://club.china.alibaba.com/forum/thread/search_forum.html?action=SearchForum&doSearchForum=true&main=1&catcount=10" , title:"请输入您感兴趣的关键词查找帖子" , tracelog:"alishopsearch_club"} 
 ]
 
</script>
<div  class="listSearch">
 <div class="listTab">
  <ul>
   <li class="activeTab" id="node1"><div>供应</div></li>
   <li class="tab" id="node2"><div><a href="javascript:doclick(2);">求购</a></div></li>
   <li class="tab" id="node3"><div><a href="javascript:doclick(3);">产品</a></div></li>
   <li class="tab" id="node4"><div><a href="javascript:doclick(4);">公司</a></div></li>
   <li class="tab" id="node5"><div><a href="javascript:doclick(5);">报价</a></div></li>
   <li class="tab" id="node6"><div><a href="javascript:doclick(6);">资讯</a></div></li>
   <li class="tab" id="node7"><div><a href="javascript:doclick(7);">论坛</a></div></li>
   <li class="tab"><div><a href="http://exporter.alibaba.com/buyeroffer/list/C17P1.html?src=chinasite&txtEntrance=serch-gifts&tracelog=serch-gifts" target="_blank">出口</a></div></li>
  </ul>
 </div>
 <div class="listSearchBox">
 
 <form method="post" name="listSearchfrm" action="" οnsubmit="return checkform();">     
    <input class="textInput" type="text" name="keywords"  value="请输入产品名或公司名关键词！"  style="height:22px;color:#999;" οnclick="javascript:emptySearchBox(this);"/>
    <input class="searchButton"  value="搜 索" type="submit"/>     
 </form>
 </div>
</div>

2.还有就是这个网站上的js代码.特别好的效果

http://scbr.com/docs/products/dhtmlxTabbar/