本文实例讲述了jquery实现页面关键词高亮显示的方法。分享给大家供大家参考。具体分析如下：通过jquery对页面搜索关键词进行高亮显示 支持中文多词页面中高亮显示1. JavaScript代码如下：jQuery.fn.extend({
highlight: function(search, configs){
if(typeof(search) == 'undefined')
var configs =
jQuery.extend({
insensitive: 1, //是否匹配大小写
0匹配 1不匹配
hls_class: 'highlight', // 高亮后的class
clear_last: true, // 清除原来高亮的结果
},configs);
if(configs.clear_last) {
$(this).find("strong."+configs.hls_class).each(function(){
$(this).after($(this).text());
$(this).remove();
return this.each(function() {
if(typeof(search) == "string") {
$(this).highregx(search,configs);
} else if (search.constructor === Array ) {
for(var query in search){
var search_str = $.trim(search[query]);
if(search_str != "") $(this).highregx(search_str,configs);
highregx: function(query,configs){
query = this.unicode(query);
var regex = new RegExp("(&[^&]*&)|("+ query +")", configs.insensitive ? "ig" : "g");
this.html(this.html().replace(regex, function(a, b, c){
return (a.charAt(0) == "&") ? a : "&strong class=\""+ configs.hls_class +"\"&" + c + "&/strong&";
unicode: function(s){
var len=s.
var rs="";
s = s.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1");
for(var i=0;i&i++){
if(s.charCodeAt(i) & 255)
rs+="\\u"+ s.charCodeAt(i).toString(16);
else rs +=
s.charAt(i);
});2.highlight插件点击此处。希望本文所述对大家的jQuery程序设计有所帮助。
这是我的文章签名，在自己的文章底部展示，支持UBB标签，自动识别URL 你也可以设置自己的文章签名哦，
如果您想留下此文，您可以将其发送至您的邮箱(将同时以邮件内容&PDF形式发送)
相关文章推荐
(Ctrl+Enter提交) &&
已有0人在此发表见解
&在& 00:00收藏到了
&&在信息爆炸的时代，您的知识需要整理，沉淀，积累！Lai18为您提供一个简单实用的文章整理收藏工具，在这里您可以收藏对您有用的技术文章，自由分门别类，在整理的过程中，用心梳理自己的知识！相信，用不了多久，您收藏整理的文章将是您一生的知识宝库！
· 蜀ICP备号-1JS实现选中当前菜单后高亮显示的导航条效果
作者：企鹅
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS实现选中当前菜单后高亮显示的导航条效果,涉及JavaScript针对页面元素的遍历及样式动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果。分享给大家供大家参考。具体如下：
这里演示选中当前菜单后，该菜单高亮显示，也就是说在不改变菜单CSS代码的情况下，用JavaScript去控制菜单的背景，如果该菜单项被点击后，将赋予它一个与众不同的背景颜色或背景图像，这样可以清淅的指引用户下在浏览的网站栏目，本菜单不需要动态语言的加入，简单方便而且效果好。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&选中当前菜单后高亮&/title&
&style type="text/css"&
MARGIN: 1px 0;
WIDTH: 100%;
FONT-FAMILY:
HEIGHT: 21
BACKGROUND-COLOR: #970B0B;
font-family:Arial, Helvetica, sans-
font-size:12
PADDING: 0
LIST-STYLE-TYPE:
HEIGHT: 21
BACKGROUND-COLOR: #970B0B;
BORDER-RIGHT: #ffffff 1
HEIGHT: 21
font-family:Arial, Helvetica, sans-
font-size:12
.nav LI A {
PADDING:1px 15px 0;
FONT-WEIGHT:
LINE-HEIGHT: 20
TEXT-DECORATION:
.nav LI A:hover {
COLOR:#562505;
BACKGROUND-COLOR: #f4f524;
TEXT-DECORATION:
background:#D42524;
.nav li#date{
PADDING:2px 15px 0;
&script language="javascript" type="text/javascript"&
var $c=function(array){var nArray = [];for (var i=0;i&array.i++) nArray.push(array[i]);return nA};
Array.prototype.each=function(func){
for(var i=0,l=this.i&l;i++) {func(this[i],i);};
document .getElementsByClassName=function(cn){
var hasClass=function(w,Name){
var hasClass =
w.className.split(' ').each(function(s){
if (s == Name) hasClass =
return hasC
var elems =document.getElementsByTagName("*")||document.
var elemList = [];
$c(elems).each(function(e){
if(hasClass(e,cn)){elemList.push(e);}
return $c(elemList);
function change_bg(obj){
var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for(var i=0;i&a.i++){a[i].className="";}
obj.className="current";
&DIV class="nav"&
&LI&&A href="#" onclick="change_bg(this)"&脚本首页&/A&&/LI&
&LI&&A href="#" onclick="change_bg(this)"&网页特效&/A& &/LI&
&LI&&a href="#" class="current" onclick="change_bg(this)"&精品脚本&/a& &/LI&
&LI&&A href="#" onclick="change_bg(this)"&ASP代码&/A& &/LI&
&LI&&A href="#" onclick="change_bg(this)"&PHP代码&/A& &/LI&
&LI&&A href="#" onclick="change_bg(this)"&JSP代码&/A& &/LI&
&LI&&A href="#" onclick="change_bg(this)"&脚本资源&/A& &/LI&
&LI&&A href="#" onclick="change_bg(this)"&软件下载&/A& &/LI&
希望本文所述对大家的JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具1Pages: 1/3& & &Go
主题 : 终于实现了通过js判断当前页高亮显示标题！
个性签名:仁者无敌-感恩php168
级别: 齐博总版
发帖: 10093
威望: 611356 点
铜板: 10850
精华风格度: 0 点
在线时间: 556 小时
终于实现了通过js判断当前页高亮显示标题！
&&&&&&&因公司栏目方面的需要，关于公司的简介部分，虽然类似于独立页，但因为独立页上传图片方面还不是很健全，所以改用文章模型，通过栏目来实现了关于公司简介的一个个独立页面。当然内容页是单独做的另外一个模板。&&&&但有一个问题，类似于“公司简介”、“公司荣誉”、“公司文化”、“战略远景”等标题，堆在一起，有时会让访问者眼花缭乱，必须要使用当前页左侧标题跟着高亮显示，这样显得有条理一些、利于浏览者再继续点击其它页面。&&&&对于熟悉php语言的朋友来讲，应该是小菜一碟的事情，但本人对于php语言几乎是门外汉，只是略微能看懂一些。虽然知道逻辑判断的原理，但不会写啊&&&&&&&&通过咨询论坛里的“飞将军”、“奋斗的十二”两位兄弟，也是没有什么结果，不过“奋斗的十二”兄弟提示我去网上找找代码吧，这样就开始大海捞针了。搜索了好几个关键词，终于找到一段js代码，略微修改之后，实现了！哈哈！感谢这2位兄弟哟~&&&&&&&&效果演示： screen.width-461) window.open('/attachment6vh00/Day_23_e3ca.jpg');" > screen.width-461) window.open('/attachment6vh00/Day_23_bef52.jpg');" >&&&&&&JS代码如下：本部分内容设定了隐藏,需要回复后才能看到
个性签名:泪奔网_www.leiben.net
级别: 齐博博士
发帖: 7641
威望: 7660 点
积分: 23478 个
精华风格度: 0 点
在线时间: 1470 小时
这么晚了还没睡？本部分内容设定了隐藏,需要回复后才能看到
+ 与百度一起共成长！
级别: 齐博超管
发帖: 10621
威望: 10957 点
积分: 23783 个
铜板: 7350
精华风格度: 1 点
在线时间: 11699 小时
级别: 齐博初中生
威望: 264 点
积分: 494 个
精华风格度: 0 点
在线时间: 898 小时
个性签名:模版设计 二次开发
级别: 齐博版主
发帖: 2054
威望: 2378 点
积分: 282895 个
精华风格度: 0 点
在线时间: 6049 小时
&&!--EOT;$array=is_array($Fid_db[$fid])?$Fid_db[$fid]:$Fid_db[$fidDB[fup]];foreach($array AS $key=&$value){$value=get_word($value,16,0);$class=($key==$fid)?&class=hover2&:'';print &&&EOT--&&&&&&&&&& &li $class&&a href=&list.php?fid=$key&&$value&/a&&/li&&&&&&&&&& &!--EOT;}print &&&EOT--&php版本的只要这样就可以&& 定义一个.hover2 的css&& 这个代码只有在列表和内容页面有效& 不需要JS
引用 ==&微站、整站2000人超级群：2982276 ==&欢迎大家加入 齐博CMS因有你而强大
个性签名:客户就是上帝
级别: 齐博版主
发帖: 11318
威望: 14869 点
铜板: 1536
精华风格度: 1 点
在线时间: 5703 小时
不用js吧,直接if也可以
引用 →承接仿站、模板制作、整站建设、网站推广等网站业务 非诚心勿扰→承接SEO、网站修改、二次开发、数据采集等网络业务→QQ： 工作室网站：→齐博最活跃数据采集群: →提供各种API接口制作、对接等业务→模板制作、网站修改、请选择版主不然有可能被骗 1元
个性签名:模版设计 二次开发
级别: 齐博版主
发帖: 2054
威望: 2378 点
积分: 282895 个
精华风格度: 0 点
在线时间: 6049 小时
screen.width-461) window.open('/attachment6vh00/Day_23_bde9.jpg');" > if都不用 直接 KEY 就可以判定一直都是这么做的&!--相关栏目--&&&&&&div class=&leibie&&&&&&&&&h2& $fidDB[name] &/h2&&&&&&&&div class=&liebiao_con&&&&&&&&&&&ul& &!--EOT;$array=is_array($Fid_db[$fid])?$Fid_db[$fid]:$Fid_db[$fidDB[fup]];foreach($array AS $key=&$value){$value=get_word($value,16,0);$class=($key==$fid)?&class=hover2&:'';print &&&EOT--&&&&&&&&&&&&li $class&&a href=&list.php?fid=$key&&$value&/a&&/li&&&&&&&&&&&&!--EOT;}print &&&EOT--&&&&&&&&&&/ul&&&&&&&&/div&&&&&&/div&
引用 ==&微站、整站2000人超级群：2982276 ==&欢迎大家加入 齐博CMS因有你而强大
个性签名:美食 中国&am
级别: 齐博本科生
发帖: 1725
威望: 1820 点
积分: 6866 个
精华风格度: 0 点
在线时间: 1767 小时
***************************************** *　　　　　　 　 　　　 　　　　******************************************
个性签名:www.sinmeng.net
级别: 齐博硕士
发帖: 3442
威望: 3698 点
积分: 29198 个
精华风格度: 0 点
在线时间: 9690 小时
楼上都是人才啊
级别: 齐博大专生
发帖: 1054
威望: 1089 点
积分: 2180 个
精华风格度: 0 点
在线时间: 1094 小时
引用 引用第8楼sinmengnet于 09:53发表的&&:楼上都是人才啊
个性签名:模版设计 二次开发
级别: 齐博版主
发帖: 2054
威望: 2378 点
积分: 282895 个
精华风格度: 0 点
在线时间: 6049 小时
&!--EOT;$res = $db-&query(&SELECT SQL_CALC_FOUND_ROWS A.* FROM {$pre}article A LEFT JOIN {$pre}sort B ON A.fid=B.fid WHERE A.yz=1 AND B.fup IN(15) ORDER BY list DESC LIMIT 0,10&);while($rs = $db-&fetch_array($res)){$class=($rs[aid]==$id)?&class=hover2&:''; print &&&EOT--&&&&&&&&&&&&&&li $class&&a href=&bencandy.php?fid=$rs[fid]&id=$rs[aid]&&$rs[title]&/a&&/li&&!--EOT;}print &&&EOT--&B.fup IN(15)&&是大分类为15下面的 读取10条B.fid IN(15)&&是小栏目为15
本帖最近评分记录：
铜板:+10(飞鸿踏雪) 谢谢！
引用 ==&微站、整站2000人超级群：2982276 ==&欢迎大家加入 齐博CMS因有你而强大
个性签名:仁者无敌-感恩php168
级别: 齐博总版
发帖: 10093
威望: 611356 点
铜板: 10850
精华风格度: 0 点
在线时间: 556 小时
感谢suifeng 兄弟的支持，在他的帮助下，通过key值的设定，去调了标签，更加简单的实现了。以下是代码：&!--EOT;$res = $db-&query(&SELECT SQL_CALC_FOUND_ROWS A.* FROM {$pre}article A LEFT JOIN {$pre}sort B ON A.fid=B.fid WHERE A.yz=1 AND B.fid IN(3) ORDER by A.aid ASC LIMIT 0,10&);while($rs = $db-&fetch_array($res)){$class=($rs[aid]==$id)?&class=current&:''; print &&&EOT--&&&&&&&&&&&&&&li&&a $class href=&bencandy.php?fid=$rs[fid]&id=$rs[aid]&&$rs[title]&/a&&/li&&!--EOT;}print &&&EOT--&
本帖最近评分记录：
积分:+3(yxbo) 分享经验
个性签名:网站在于细节！
级别: 齐博大专生
发帖: 1011
威望: 691 点
积分: 130406 个
精华风格度: 0 点
在线时间: 3925 小时
个性签名:时间都去哪儿啦！
级别: 齐博版主
发帖: 4102
威望: 312 点
积分: 49884 个
精华风格度: 0 点
在线时间: 6853 小时
引用 齐博CMS，最好用的建站系统 →模板制作、网站修改、网站推广。 联系QQ： 电话：
个性签名:苦涩的上网生活
级别: 齐博本科生
发帖: 1629
威望: 1505 点
积分: 32452 个
精华风格度: 0 点
在线时间: 873 小时
我以为楼主会PHP哦，我也学习了
***************************************** *　　　　　　 　 　　　 　　　　******************************************
个性签名:细节决定成败
级别: 齐博本科生
发帖: 2531
威望: 1141 点
积分: 587 个
精华风格度: 0 点
在线时间: 803 小时
应用文搜藏网：
个性签名:手绘
级别: 齐博初中生
威望: 198 点
积分: 93602 个
精华风格度: 0 点
在线时间: 789 小时
级别: 齐博小学生
威望: 166 点
积分: 112 个
精华风格度: 0 点
在线时间: 436 小时
学习了，都是人才。。。。。
个性签名:没个性，不签名
级别: 齐博高中生
威望: 654 点
积分: 167 个
精华风格度: 0 点
在线时间: 999 小时
回 楼主(飞鸿踏雪) 的帖子
***************************************** *　　　　　　 　 　　　 　　　　******************************************
个性签名:不知道说点什么&&
级别: 齐博大专生
发帖: 1064
威望: 1239 点
积分: 1182 个
精华风格度: 0 点
在线时间: 2389 小时
下显示子栏目列表并分页!
1Pages: 1/3& & &Go
>> 齐博门户系统专区
&|- 门户开发动态
&|- 门户BUG反馈
&|- 门户功能建议
>> 齐博产品和服务
&|- 官方动态
&|- 程序下载
&|- 商业授权专区
&|- 功能建议
&|- BUG反馈
&|- 新手教程
教程归纳区
&|- 精选风格
&|- 站务咨询
&|- 团队交流
>> 齐博交流和讨论
&|- CMS整站系统
&|- 分类信息系统
&|- B2B电子商务系统
&|- 风格模板
&|- 模块插件
&|- 采集参数
>> 齐博业余和爱好
&|- 建站交流
&|- 无话不说
&|- 站长交易
>> 合作伙伴与VIP会员
&|- 协众OA
&|- VIP会员专区
>> 齐博站务和管理
打造最专业的门户系统建站程序}