js使用排他思想实现导航栏的切换
来源:互联网 发布:apache 安装版下载 编辑:程序博客网 时间:2024/05/22 14:35
导航栏的切换
html代码如下:
<div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div> <div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裤子</li> <li>裙子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裤子</span> <span>裙子</span> </div>
css样式:
<style> * { padding: 0; margin: 0; } .box { width: 500px; height: 400px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } ul { width: 600px; height: 40px; margin-left: -1px; list-style: none; } li { float: left; width: 101px; height: 40px; text-align: center; font: 600 18px/40px "simsun"; background-color: pink; cursor: pointer; } span { display: none; width: 500px; height: 360px; background-color: yellow; text-align: center; font: 700 150px/360px "simsun"; } .show { display: block; } .current { background-color: yellow; }</style>
<script> //首先获取所有的li var box = document.getElementsByClassName("box"); //循环调用函数 有几个box,调用几次 互不影响 for(var i = 0;i<box.length;i++){ fn(box[i]); } function fn(ele){ var liArr = ele.getElementsByTagName("li"); var spanArr = ele.getElementsByTagName("span"); for(var i = 0;i < liArr.length;i++){ //为每个li绑定索引值 liArr[i].index = i; liArr[i].onmouseover = function(){ //为所有的li标签添加鼠标移入事件 排他思想,干掉所有人,设置自己 for(var j = 0;j<liArr.length;j++){ liArr[j].className = ""; spanArr[j].className = ""; } //设置当前鼠标移入的类名为current this.className = "current"; //设置当前的索引值所对应的span标签的类名为show spanArr[this.index].className = "show"; } } }</script>
排他思想:
干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值
运行结果如下:
阅读全文
1 0
- js使用排他思想实现导航栏的切换
- JS排他思想(实现导航栏)
- JS---排他思想及Tab栏的切换
- 使用JS实现导航切换时高亮显示
- 3.4 JS 排他思想&&节点&&dom 的节点操作
- js实现简单导航切换
- Js中实现网页上导航条的切换功能
- (js)用window.onload实现刷新页面的导航栏状态的切换
- JS实现导航栏项目自动切换标签样式
- 使用ZooKeeper实现Redis订阅消息的排他式处理
- jquery实现导航栏切换
- 使用js实现图片的自动切换
- 使用附加导航(affix)实现内容切换
- JS实现导航栏
- Toolbar的用法,实现导航栏的切换
- web前端之用js控制导航栏与副导航栏的切换
- 极致精简的fragment实现导航栏切换demo
- Fragment 实现底部导航栏的简单切换
- 栈的应用:左右符号匹配
- C++11之 unique_ptr
- Python Numpy的数组array和矩阵matrix的用法与区别
- Kotlin学习笔记(一)环境配置HelloWorld
- Struts2笔记第一天
- js使用排他思想实现导航栏的切换
- 栈的应用:计算字符串表达式
- Mac OS Git 安装
- 【Java】Gson解析复杂数据
- 算法复习:丑数
- 个人笔记4
- arm-linux 汇总
- 数据结构封装之《LinkQueue链式队列》
- Java websocket入门