帝国搜索框优化修改 tab选项卡式
更新时间:2015年12月30日 16:42 点击:2059
帝国的搜索一直以来都觉得不满意,现在分享一个tab切换式的搜索方案供大家参考,感觉还是不错的,也是现在比较通用的一种方案。效果如下图
<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>
相关文章
- 这篇文章主要为大家详细介绍了Node实现搜索框进行模糊查询,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- TAB选项卡是一个非常不错可以在同样大小的空间中放更多的内容了,现在我们看很多门户网站都有这个功能,可能大家见得最多的就是QQ弹窗了,有很多的分类可以进行切换的哦。...2017-07-06
- 这篇文章主要为大家详细介绍了jquery中用jsonp实现搜索框功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-20
- 我们要写个css教程如 .on{}当前状态 .off{}平常状态 下面来看看实现原理,就是根据 if( $_get['id'] ) { $class ='on'; } else { $class ='off'; } <di...2016-11-25
iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能
这篇文章主要介绍了iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-30- 这篇文章主要为大家详细介绍了WPF自定义搜索框代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有需要的朋友可以下载测试哦。 先来看看效果 代码如下 index.html文件,保保存成index.htm ...2016-11-25
- 帝国的搜索一直以来都觉得不满意,现在分享一个tab切换式的搜索方案供大家参考,感觉还是不错的,也是现在比较通用的一种方案。效果如下图<form action="[!----news.url--]e/searc...2015-12-30
- 这篇文章主要为大家分享了js实现搜索框关键字智能匹配代码,感兴趣的朋友可以参考一下...2016-01-07
- 这篇文章主要介绍了JavaScript tab选项卡插件实例代码的相关资料,需要的朋友可以参考下...2016-02-26
- 这篇文章主要介绍了JS仿淘宝搜索框用户输入事件的实现,需要的朋友可以参考下...2017-06-24
- 这篇文章主要介绍了php实现按天数、星期、月份查询的搜索框的相关资料,需要的朋友可以参考下...2016-05-05
- 随着网站内容越来越多(一个运营良好的网站,内容不断的增加应该是常规性工作),那么,搜索功能的作用就日益凸显出来,那么网站优化中搜索框如何设计?下面小编就为大家介绍网...2017-07-06
Xamarin框架开发Android搜索框 Search Dialog实例
Android搜索有Search Dialog及SearchView两种方式,本教程我们讲讲用Xamarin框架如果开发ndroid搜索框 Search Dialog。 Android 的搜索有两种可用方式:Search Dialo...2016-09-20