文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

首页 > web前端 > js教程 > 正文

li隔行换色改进版_javascript技巧

php中文网

发布： 2016-05-16 19:04:33

原创

1212人浏览过

ghhs("nav01","li"); // 鼠标经过时变色
ghhs("nav02","li","no"); // 只隔行换色
ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰">
<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的...">
<meta name="Author" content="PRcss,qq:50198763">
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved">
<title>隔行换色 - www.jb51.net 本站</title>
<script type="text/javascript">  
// 返回Id、Tag  
function Pid(id,tag){  
if(!tag){return document.getElementById(id);}  
else{return document.getElementById(id).getElementsByTagName(tag);}  
}  
// 隔行换色  
function ghhs(id,tag,s) {  
    var line=Pid(id,tag);  
    for (var i=1;i<line.length+1;i++) {   
        line[i-1].className=(i%2>0)?"t1":"t2";   
    }  
    if(s=="no"){  
        return;  
    }  
    else if(!s){  
        for(var i=0;i<line.length;i++) {  
            line[i].onmouseover=function(){  
                this.tmpClass=this.className;  
                this.className+=" up";  
            }  
            line[i].onmouseout=function(){  
                this.className=this.tmpClass;  
            }  
        }  
    }  
    else{  
        for(var i=0;i<line.length;i++) {  
            line[i].tmep=i;  
            line[i][s]=function(){  
                ghhs_tab(this.tmep);  
            }  
        }  
    }  
    function ghhs_tab(s){  
        for(var i=0;i<line.length;i++){  
            if(!line[i].tmpClass){  
                line[i].tmpClass=line[i].className+=" pr1984_com";  
            }  
            if(s==i){  
                line[i].className+=" up";  
            }  
            else {  
                line[i].className=line[i].tmpClass;  
            }  
        }  
    }  
}  
</script><style type="text/css">  
.t1 {background:#eee;}  
.t2 {background:#fff;}  
.up {background:#ddd;}  
</style>
<div id="nav01">  
<ul>
<li>路过</li>
<li>asdsad</li>
<li>asdsad</li>
<li>asdsad</li>  
</ul>
</div>

<div id="nav02">  
<ul>
<li>无视路过</li>
<li>asdsad</li>
<li>asdsad</li>
<li>asdsad</li>  
</ul>
</div>

<div id="nav03">  
<ul>
<li>踩我</li>
<li>asdsad</li>
<li>asdsad</li>
<li>asdsad</li>  
</ul>
</div>

<script type="text/javascript">  
ghhs("nav01","li");  
ghhs("nav02","li","no");  
ghhs("nav03","li","onclick");  
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：比较不错的函数式JavaScript编程指南教程_javascript技巧下一篇：用函数式编程技术编写优美的 JavaScript_ibm_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

js如何操作SVG元素 SVG图形操作的3个实用技巧分享操作SVG元素与操作DOM类似，需先获取元素再修改属性或添加事件。1.获取SVG元素使用document.getElementById()或document.querySelector()；2.修改属性可用setAttribute()或直接赋值；3.添加事件监听器通过addEventListener()；4.动态创建SVG元素需用createElementNS()并指定命名空间；5.实现动画可通过requestAnimationFrame()或CSS动画；6.处理事件时注意坐标计算差异；7.优化

2025-06-18 19:21:01

364

JS怎样控制视频画中画 4个API实现视频浮动窗口播放实现视频画中画的核心是使用Picture-in-PictureAPI。1.首先检查浏览器是否支持：通过document.pictureInPictureEnabled属性判断；2.请求进入画中画模式：调用视频元素的requestPictureInPicture()方法并处理Promise结果；3.监听状态变化：通过enterpictureinpicture和leavepictureinpicture事件更新UI；4.控制画中画窗口：通过document.pictureInPictureEleme

2025-06-18 19:00:02

980

js怎样实现长按事件监听长按事件实现的4种解决方案实现JavaScript长按事件监听的核心在于模拟，1.使用基础定时器方案结合mousedown/touchstart和mouseup/touchend事件配合setTimeout控制定时触发；2.为解决移动端滑动干扰，需添加touchmove监听并判断移动距离是否超出阈值；3.可使用PointerEventsAPI统一处理跨平台输入；4.也可借助第三方库如Hammer.js实现高级手势识别；5.长按触发时间一般设为300-1000毫秒，需根据用户体验调整；6.防止重复触发可通过标志位控制；7.

2025-06-18 16:42:02

987

js中多个条件需要轮询判断怎么写轮询判断多个条件的核心是使用定时器结合异步操作以避免阻塞主线程。首先，定义异步的条件判断函数，其次使用setInterval或requestAnimationFrame创建定时器，在回调中依次检查条件，若全部满足则执行操作并停止定时器，否则继续轮询。此外，应设置超时机制防止无限轮询。轮询频率需在响应速度与资源消耗间平衡，过高会增加负载，过低影响响应及时性。避免死循环的关键在于合理退出机制，如最大次数限制、异常处理等。轮询适用于实时性要求不高且服务器不支持WebSocket的场景，而WebSock

2025-06-18 16:03:01

937

js怎样实现代码高亮功能代码高亮显示的4种实现方案代码高亮的实现方案主要有四种，分别是使用现成库、在线服务、自行编写逻辑和借助Markdown解析器。使用现成库如Prism.js、Highlight.js或CodeMirror是最常见的方式，它们支持多语言且配置简便，但会增加页面体积；在线服务无需引入库但依赖网络连接；自行实现适合有特殊需求者，但开发成本高；Markdown解析器方便快捷但灵活性较差。选择时应考虑支持的语言、体积、易用性、可定制性和社区活跃度，其中Prism.js和Highlight.js是热门选择，CodeMirror更适合在

2025-06-18 14:51:01

220

js怎么检测浏览器类型 js检测浏览器类型的5种方法汇总在JavaScript中检测浏览器类型最推荐的方法是使用特性检测。1.特性检测通过判断浏览器是否支持特定API，如if('geolocation'innavigator)；2.避免直接依赖userAgent，因其易被篡改且格式不统一；3.可辅助使用navigator.vendor和navigator.platform判断供应商和操作系统；4.使用第三方库如bowser可提高可靠性；5.处理兼容性问题应优先编写标准代码并提供polyfill备选方案；6.除浏览器类型外还需考虑版本、设备类型、分辨率

2025-06-18 14:48:02

458

js如何生成二维码图片前端生成二维码的3种简单方法前端生成二维码的方法是利用JavaScript库将数据转换为二维码图片，具体步骤包括：1.选择合适的库如qrcodejs2；2.引入库文件到HTML页面；3.编写代码创建QRCode对象并配置参数；4.渲染二维码到指定DOM元素。前端生成的优势在于减轻服务器压力、提升效率，并支持动态内容更新。然而需注意安全风险，如敏感信息暴露和库漏洞，建议重要场景在后端生成并加密。性能优化可通过选用轻量库、合理设置参数、缓存图片及使用WebWorkers实现。

2025-06-18 11:51:02

738

js如何监听窗口滚动事件滚动事件监听的3种实现方式滚动事件监听有3种实现方式：第一，直接使用window.onscroll赋值函数，但会覆盖原有监听器；第二，使用window.addEventListener添加多个监听器，灵活性更高；第三，结合节流或防抖优化性能，控制高频触发。此外，判断滚动方向需记录上次位置并与当前比较；优化方面包括减少DOM操作、使用requestAnimationFrame及缓存计算结果；移动端需注意触屏滚动、惯性滚动及视口变化影响。掌握这些方法可提升页面响应效率与用户体验。

2025-06-18 10:42:02

417

js如何实现声纹识别语音生物特征识别技术实现 JavaScript实现声纹识别是可行的，但具有挑战性。首先利用WebAudioAPI进行音频采集；其次通过MFCC算法提取声纹特征，可借助WASM或第三方库完成；接着根据验证或识别需求选择存储特征或训练模型；最后通过距离计算或模型预测完成比对。由于浏览器端计算资源受限、高质量库缺乏及隐私问题，实际开发中需权衡性能与安全，并考虑结合云端API提升效果。

2025-06-18 09:30:02

452

js如何实现数据验证规则 4种验证方案确保表单数据准确 JS数据验证方案选择取决于项目复杂度和技术栈。1.原生JS手动验证通过if语句和正则表达式实现，灵活性高但代码量大；2.HTML5内置验证使用required、pattern等属性快速实现简单验证，但自定义程度低；3.第三方库如jQueryValidationPlugin、Validator.js提供丰富规则和易用API，简化代码但引入额外依赖；4.响应式框架如React结合Formik或Vue结合VeeValidate可实现复杂验证逻辑。HTML5验证不足在于无法自定义错误提示、实现复杂逻辑及

2025-06-18 08:12:02

872

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

ThinkPHP5快速开发企业站点[全程实录]

399669次学习
收藏
PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

51372次学习
收藏
Thinkphp3.2.3个人博客开发

212763次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部