学步园

    舌签导航条很多见，比如新浪网（用javascript+div实现），集成搜索也很多。本文以Javascript+table实现双行舌签导航条，效果图如下：

    原理很简单，一共3个tr，第1个和最后1个tr是舌签行，中间是搜索区。每一个舌签行由多个舌签td,加上2个修饰用的td组成，用td的onclick事件控制舌签图片（我用的是交错图片，要稍微复杂点，如果是方块状舌签要简单很多）和搜索区，代码比较简单，不在多说，完整源代码请下载附件（http://www.hugesoft.net/ContentPage.aspx?p1=010001&p2=238）。

        <script type='text/javascript'>
                var ItemArray=new MyArray(10);
                ItemArray[0]="tdItem1";
                ItemArray[1]="tdItem2";
                ItemArray[2]="tdItem3";
                ItemArray[3]="tdItem4";
                ItemArray[4]="tdItemLast";
                ItemArray[5]="BtdItem1";
                ItemArray[6]="BtdItem2";
                ItemArray[7]="BtdItem3";
                ItemArray[8]="BtdItem4";
                ItemArray[9]="BtdItemLast";

                var PrevSelectTd=0;
                var PrevSelectTdP=-1;
                
                function MyArray(len)...{
                        this.length = len;
                        return this;
                }

                function OnTdSelect(param,param2)
                ...{
                        //没有新的选择
                        if(param==PrevSelectTd)
                                return;
                                                    
                        //上次选择的非每一排的第一个            
                        if(PrevSelectTdP!=-1)
                        ...{
                                document.getElementById(ItemArray[PrevSelectTdP]).className=((PrevSelectTdP<5)?"":"B")+(((PrevSelectTdP%5)==4)?"TdLastItem":"TdItem");                                
                                PrevSelectTdP=-1;
                        }

                        if((param%5)!=0)
                        ...{
                                //不是第一个
                                if((param-1)!=PrevSelectTd)
                                        document.getElementById(ItemArray[PrevSelectTd]).className=((PrevSelectTd<5)?"":"B")+(((PrevSelectTd%5)==4)?"TdLastItem":"TdItem");
                                        
                                document.getElementById(ItemArray[param-1]).className=((param>5)?"B":"")+"TdItemSelectP";
                                PrevSelectTdP=param-1;                                        
                        }
                        else
                        ...{
                                document.getElementById(ItemArray[PrevSelectTd]).className=((PrevSelectTd<5)?"":"B")+(((PrevSelectTd%5)==4)?"TdLastItem":"TdItem");
                        }
                        document.getElementById(ItemArray[param]).className=((param<5)?"":"B")+(((param%5)==4)?"TdLastItemSelect":"TdItemSelect");
                        PrevSelectTd=param;
                                                                        
                        document.forms["form1"].action=param2;
                        
                        var searchType=document.getElementById(ItemArray[param]).innerHTML;
                        if(searchType=="百度")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input name='tn' type='hidden' value='baidu'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
                        }
                        else if(searchType=="谷歌")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input type='hidden' name='ie' value='GB2312'/><input name='oe' type='hidden' value='GB2312'/><input name='hl' type='hidden' value='zh-CN'/><input type='text' name='q' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='btnG' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";                        
                        }
                        else if(searchType=="雅虎")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input type='text' name='p' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";                        
                        }
                        else if(searchType=="搜搜")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input type='text' name='w' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";                        
                        }
                        else if(searchType=="搜狗")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input type='hidden' name='insite' value='http://www.hugesoft.net/'><input type='text' name='query' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' name='sogou_submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";                        
                        }
                        else if(searchType=="新闻")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input name='tn' type='hidden' value='news'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
                        }
                        else if(searchType=="MP3")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input name='ct' type='hidden' value='134217728'/><input name='lm' type='hidden' value='-1'/><input name='tn' type='hidden' value='baidump3'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
                        }
                        else if(searchType=="图片")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input name='ct' type='hidden' value='201326592'/><input name='cl' type='hidden' value='2'/><input name='lm' type='hidden' value='-1'/><input name='pv' type='hidden' value=''/><input name='z' type='hidden' value='0'/><input name='tn' type='hidden' value='baiduimage'/><input type='text' name='word' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
                        }
                        else if(searchType=="视频")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input type='text' name='word' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
                        }
                        else if(searchType=="地图")
                        ...{
                                document.getElementById("tdInputValue").innerHTML="<input type='text' name='word' size='28' class='TextBoxStyle'/>";
                                document.getElementById("tdButtonValue").innerHTML="<input type='submit' value='' style='width:74px;height:25px;border:0;background-image:url(Images/HugesoftSearch.gif);'/>";
                        }
                }
        </script>

    转载请注明：炬源信息技术网（http://www.hugesoft.net）