近来在网上瞎逛的时候,发现了几种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/
