当前位置:首页 > 教程中心 > CMS教程 > 帝国CMS

帝国搜索框优化修改 tab选项卡式

所属栏目:帝国CMS 时间:2014-03-17 来源:网络 作者:不详 点击:

帝国CMS 2000人qq交流群:42085595

帝国的搜索一直以来都觉得不满意,现在分享一个tab切换式的搜索方案供大家参考,感觉还是不错的,也是现在比较通用的一种方案。效果如下图

1374145731.png

<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" style="display:none;"></li>
      <li id="one2" onclick="setTab('one',2,8)"><label for="s2">下载</label>
<input id="s2" type="radio" name="tbname" value="download" style="display:none;"></li>
      <li id="one3" onclick="setTab('one',3,8)"><label for="s3">图库</label>
<input id="s3" type="radio" name="tbname" value="photo" style="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" style="display:none;"></li>
      <li id="one5" onclick="setTab('one',5,8)"><label for="s5">电影</label>
<input id="s5" type="radio" name="tbname" value="movie" style="display:none;"></li>
      <li id="one6" onclick="setTab('one',6,8)"><label for="s6">商品</label>
<input id="s6" type="radio" name="tbname" value="shop" style="display:none;"></li>
      <li id="one7" onclick="setTab('one',7,8)"><label for="s7">文章</label>
<input id="s7" type="radio" name="tbname" value="article" style="display:none;"></li>
      <li id="one8" onclick="setTab('one',8,8)"><label for="s8">分类信息</label>
<input id="s8" type="radio" name="tbname" value="info" style="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>



请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: