帝国CMS使用jQuery实现多表TAB切换搜索功能

ECMSPLUS | 2020-10-22 |

摘要:帝国CMS使用jQuery实现多表TAB切换搜索功能(搜索模板同时切换)...

帝国CMS使用jQuery实现多表TAB切换搜索功能(搜索模板同时切换) 红色的搜索框样式,tab搜索框代码CwrECMSPLUS

实现功能:

① 点击上部的li,当前li添加current类,其余兄弟移除类CwrECMSPLUS
② 点击的同时,得到当前li的索引号CwrECMSPLUS
③ 让下面内容区里面相应索引号的item显示,其余的item隐藏CwrECMSPLUS

如下示例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全站搜索</title>
<style type="text/css">
body{ background:#ffffff;color:#333333;font:12px/20px SimSun,Tahoma,Helvetica,Arial,sans-serif;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,p,img { padding: 0; margin: 0; }
img {border:0;}
ol,ul,li{ list-style: none; }
a{color:#272727;text-decoration:none; outline:none;}
a:hover {color:#005e9c; text-decoration:none; }
.fl{ float:left; }
.fr{ float:right; }
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.sousuo{ width:500px;margin: 120px auto 250px;}
.sousuo img{ margin: 0 0 30px 80px;}
.sousuo ul,.soujieguo ul{ width: 100%; clear: both;}
.sousuo ul li,.soujieguo ul li{cursor: pointer; float: left; color: #005e9c;width:70px; text-align: center; padding: 2px 5px;}
.sousuo ul li.on,.soujieguo ul li.on{ font-weight: bold; background: #0073c3; color:#fff;}
.sousuo .soutext,.soujieguo .soutext{ border: 1px solid #cbcbcb; height: 30px; width: 400px; vertical-align: middle;line-height:30px;font-size: 14px; }
.sousuo .sou,.soujieguo .sou{height: 32px; width: 80px; border: none; border-left: none; background: #0073c3; color: #fff;vertical-align: middle;}
.soufoot{ text-align: center;width: 960px; margin: 0 auto;}
.soufoot p.fl{float: none;}
.soujieguo { padding: 20px;}
.soujieguo dt{ line-height: 40px;}
.soujieguo dd{ margin: 10px 0;border-bottom: 1px dashed #cccccc; padding-bottom: 10px;}
.soujieguo  h2{ font-size: 14px; color: #005e9c;}
.soujieguo  h2 a{color: #005e9c;}
.soujieguo  h2 a:hover{text-decoration: underline;}
.soujieguo  p{ margin: 0;}
.soujieguo a{ color:#659B28; }
</style>
</head>
<body>
<!--主体开始-->
<div class="main clearfix">
<div class="sousuo">
<form name="searchform" method="post" action="/e/search/index.php">
<input type="hidden" name="tbname" id="biao" value="news">
<input type="hidden" name="show" value="title,smalltext,newstext">
<input type="hidden" name="tempid" id="tempid" value="1">
<ul>
<!-- 下面biao指的是数据表名,tempid是对应数据表名的搜索模板id  -->
<li biao="news" tempid="1" class="on">新闻搜索</li>
<li biao="download" tempid="2">下载搜索</li>
<li biao="photo" tempid="3">图片搜索</li>
<li biao="flash" tempid="4">flash搜索</li>
</ul>
<ul>
<input type="text" name="keyboard" value="" class="soutext" /><input type="submit" value="搜 索" class="sou">
</ul>
</form>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(".sousuo li").click(function(){
$(this).siblings().removeClass("on");
$(this).addClass("on");
var biao=$(this).attr("biao");
$("#biao").val(biao);
var tempid=$(this).attr("tempid");
$("#tempid").val(tempid);
});
</script>
</body>
</html>

免责/版权声明:

1、所有来源标注为 ECMSPLUS/ecmsplus.com的内容版权均为本站所有,若您需要引用、转载,只需要注明来源及原文链接即可,如涉及大面积转载,请来信告知,获取授权。

2、本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

3、若您的网站或机构从本站获取的一切资源进行商业使用,除来源为本站的资料需与本站协商外,其他资源请自行联系版权所有人。

4、 ECMSPLUS/ecmsplus.com不保证资源的准确性、安全性和完整性,请您在阅读、下载及使用过程中自行确认,本站亦不承担上述资源对您或您的网站造成的任何形式的损失或伤害

5、未经 ECMSPLUS/ecmsplus.com允许,不得盗链、盗用本站资源;不得复制或仿造本网站,不得在非 ECMSPLUS/ecmsplus.com所属的服务器上建立镜像, ECMSPLUS/ecmsplus.com对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权,任何人不得侵害或破坏,也不得擅自使用。

6、互联网的本质是自由与分享,我们真诚的希望,每一份有价值的正能量能够在互联网中自由传播,能够为每一个网站提供动力。

标签:
精品源码
  • 帝国cms7.5精仿企业信息综合门户《莞商网》(原创)

    惊爆价¥1500.00

    立即购买
    帝国cms7.5精仿企业信息综合门户《莞商网》(原创)
  • 二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发

    惊爆价¥1500.00

    立即购买
    二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发
  • 厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码

    惊爆价¥1999.00

    立即购买
    厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码
看点推荐
精选文章

站长交流群

互联网站长技术交流群
共同学习,共同进步,共同成长!

QQ交流群

推荐文章

EmpireCMS(帝国CMS) 最新版(v7.5)已知漏洞汇总

帝国第三方登陆:微信内部登陆+扫码登陆2.0安装说明与使用方法

帝国cms百度Webupload批量上传组件,支持前台投稿

帝国cms通过用灵动标签的SQL语句查询来调用栏目导航

帝国cms图片集字段morepic分割,自定义图片集显示

帝国cms 技巧整理笔记,持续更新中

帝国cms 技巧整理笔记:常用变量,COOKIE获取和系统模板

最新文章

热门标签

关注我们

微信扫一扫,关注更多精彩

  • 公众号
    全面掌握源码一手资讯

  • 服务号
    精彩活动,推送提醒

垂询热线:18680688182

商务合作:0769-8700 9090
文章投稿: