js原声快速实现选项卡

                 var Rea = document.getElementById("rep");
                    var ReaAll = Rea.querySelectorAll("li");
                    var Fall = document.getElementById("fall");
                    var FallAll = Fall.querySelectorAll("ul");

                    for(var i=0;i<ReaAll.length;i++){
                       ReaAll[i].index=i;
                       ReaAll[i].onclick=function(){
                       for(var i=0;i<ReaAll.length;i++){
                           ReaAll[i].className=" ";
                           FallAll[i].style.display="none";
                       }
                       this.className="avtion";
                       FallAll[this.index].style.display="block";
                       }
                    }            
                                   <ul class="row rep_ad" id="rep">
                                        <li class="avtion">公告</li>
                                        <li>知识库</li>
                                    </ul>
                                    <div id="fall">
                                        <ul style="display:block;">
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                        </ul>
                                        <ul>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                        </ul>
                                    </div>
                                </div>                     

一看就懂。走起!

时间: 2024-10-11 02:55:47

js原声快速实现选项卡的相关文章

原声js基础笔记

原声js基础笔记 前端开发群: 欢迎加入. <!DOCTYPE html> <html> <head> <title>设置一个元素是否可见</title> <meta charset="utf-8"> </head> <style type="text/css"> .tips{width:370px;background:#CCC;display:none;} </

原声JS瀑布流加延迟加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style> *{ margin: 0px; padding:0px; } .box{ position: relative; top:0px; } ul li{ list-style-type: none; posit

纯音乐推荐 - 影视配乐/原声大碟(上篇)

一般来说成就一部好的影视作品有三个因素:一,故事精彩:二,演员的完美演绎:三,有可以促进剧情带你入境的好配乐--此三者缺一不可,比方说黄日华版的<天龙八部>.林青霞的<东方不败>.李连杰的<少年黄飞鸿>等. 这里我得另外提一下,如今的电影实在是不堪入目,讲故事也讲不好,做特效也做不好,如今演员的演技也不比曾经的演员那般深刻,充斥着功利心,看不到片方的丝毫诚意,大多就为了圈钱,反而常常打着支持国产的旗帜让你花钱去支持国产.支持正版,我觉得这个就有点过了.当然在中国电影市场

纯音乐推荐 - 影视配乐/原声大碟(中篇)

本篇仅推荐唯美古风类型-- 首先是麦振鸿的音乐,麦先生在配乐方面在国内也算是佼佼者,中国新一代的原创音乐宗师,经他制作配乐的电视剧有<天地传说之鱼美人>.<天地传说之宝莲灯>.<大唐女将樊梨花>.<天外飞仙>.<天下第一>.<聊斋志异>.<仙侠奇侠传>.<杨门女将>等等,他的配乐有一个共同特色就是充满武侠浪漫情怀. 曲目:爱在不知不觉间 作者:麦振鸿 出处:<大唐女将樊梨花> 音乐地址:http:/

Vue.js 60 分钟快速入门

Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为V

js实现tab页切换选项卡代码特效

原文:js实现tab页切换选项卡代码特效 源代码下载地址:http://www.zuidaima.com/share/1550463557864448.htm JS 写的tab切换效果

js面向对象+一般方法的选项卡

<!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"> <head> <meta http-equiv="Content-

拖拽碰撞--原声js(自身理解上新的方法)

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div{width:100px; 8 height:100px; 9 } 10 #box{background:red; position:absolute; } 11 #box1{background:green

原声js做动画判断是否到达目标值导致的突兀问题

如题,什么意思呢? $('#box').animate({ start:200, attr:'left', step:13, alter:400 //增量 }) 这时写好的动画函数animate用法 上面起始值是200,步长13,目标值是200+400=600,那么每次我都运动13,那么他只运动到590然后再运动到603然后判断并重新赋值到600,突兀吧?先看看我是怎么判断到达终点的 if((step>0&&target<=parseInt(getStyle(element,a