帝國的搜索一直以來都覺得不滿意，現在分享一個tab切換式的搜索方案供大家參考，感覺還是不錯的，也是現在比較通用的一種方案。效果如下圖
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <form action="[!---news.url--]e/search/index.php" method="post" name="searchform" id="searchform"><div id="menu"> <ul> <li id="one1" onclick="setTab('one',1,8)" class="hover"><label for="s1">新聞</label><input id="s1" type="radio" checked="checked" name="tbname" value="news" "display:none;"></li> <li id="one2" onclick="setTab('one',2,8)"><label for="s2">下載</label><input id="s2" type="radio" name="tbname" value="download" "display:none;"></li> <li id="one3" onclick="setTab('one',3,8)"><label for="s3">圖庫</label><input id="s3" type="radio" name="tbname" value="photo" "display:none;"></li> <li id="one4" onclick="setTab('one',4,8)"><label for="s4">FLASH</label><input id="s4" type="radio" name="tbname" value="flash" "display:none;"></li> <li id="one5" onclick="setTab('one',5,8)"><label for="s5">電影</label><input id="s5" type="radio" name="tbname" value="movie" "display:none;"></li> <li id="one6" onclick="setTab('one',6,8)"><label for="s6">商品</label><input id="s6" type="radio" name="tbname" value="shop" "display:none;"></li> <li id="one7" onclick="setTab('one',7,8)"><label for="s7">文章</label><input id="s7" type="radio" name="tbname" value="article" "display:none;"></li> <li id="one8" onclick="setTab('one',8,8)"><label for="s8">分類信息</label><input id="s8" type="radio" name="tbname" value="info" "display:none;"></li></div><div id="content"><input name="keyboard" type="text" size="32" id="keyboard" class="inputText" /><input type="hidden" name="show" value="title" /><input type="hidden" name="tempid" value="1" /><input type="image" class="inputSub" src="[!---news.url--]skin/default/images/search.gif" /></div></form> <script> function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); menu.className=i==cursel?"hover":""; } }</script> |
新聞熱點
疑難解答
