最近在搞一个被很多人改了的框架，天天看代码看的头的晕了，不过感觉进步还挺大的，自己做了一个后台可配置前台查看两个库不同数据范围的东西，还挺满意，那天拿出来分享一下，今天先说一个这几天做的功能，就是html页面的查找功能。
这个功能主要是实现在查找框内输入字符，之后按后面的上一个下一个按钮，会自动把查询区域内的匹配字符用特殊的样式标记，之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符，并把当前匹配的字符用另一种样式与其他匹配字符加以区别。
前台显示大概是这个样子：
html是这样：
<div class="container" style="z-index: 999" id="searchDiv">
<div class="keyword-search">
查找：
<input id="key" type="text" style="width: 200px;" placeholder="关键词" />
<a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>
<a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a>
</div>
</div>
相关教程
-
css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例，分享给大家，具体如下：要实现的效果图：实现的代码：-webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;box-shadow:0px 3px 3px #c8c8c8 ;
5/9/2018 9:37:43 PM -
css选择器中有小数点的标签获取方法
需求说明因为项目中章节配置的时候有小数点，1，1.1,1.2,1.11的标题，这个时候每一行标题的id,class设置成标题号是独一无二的标记。但是，直接用js获取是获取不到的，例如$(#3.22)打印只能获取到document.解决方案var array = id.split(.);var id = ;for(var i=0;i…
5/9/2018 9:37:42 PM -
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
三角形<div class="box"></div><style>.box{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid transparent;border-right: 50px solid red;}</style>
5/9/2018 9:37:41 PM -
纯css实现多级折叠菜单折叠树效果
1、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。当有子菜单时，菜单项右侧有向下的箭头，当收起菜单项时，箭头朝上。图片可以自己替换。2、效果图3、代码片…
5/9/2018 9:37:40 PM
在线客服
共有条评论 网友评论