HTML代码
<ul id="nav" class="nav"> <li id='0'> <div><img src="img/08.jpg" /></div> <p>文字</p> </li> <li id='1'> <div><img src="img/09.jpg" /></div> <p>文字</p> </li> <li id='2'> <div><img src="img/10.jpg" /></div> <p>文字</p> </li> <li id='3'> <div><img src="img/11.jpg" /></div> <p>文字</p> </li> <li id='4'> <div><img src="img/12.jpg" /></div> <p>文字</p> </li> <li id='5'> <div><img src="img/13.jpg" /></div> <p>文字</p> </li> </ul>
CSS代码
.nav ul{ width: 714px; height: 70px; display: flex; justify-content: center; align-items: center; padding: 0px; margin-top: 30px; } .nav ul li{ list-style-type: none; width: 119px; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-bottom: 2px solid #000000; font-size: 12px; color: #777777; cursor:pointer; } .nav ul li div{ width: 40px; height:40px; display: flex; justify-content: center; align-items: center; }
JS代码:
var li = document.getElementById("nav").getElementsByTagName('li'); var imageUrls=['img/08.jpg','img/09.jpg','img/10.jpg','img/11.jpg','img/12.jpg','img/13.jpg']; var imageUrlsActive=['img/08-1.jpg','img/09-1.jpg','img/10-1.jpg','img/11-1.jpg','img/12-1.jpg','img/13-1.jpg']; var color = '#777777'; var colorActive = '#D19A48'; console.log(imageUrls[0]) li[0].getElementsByTagName('img')[0].src = imageUrlsActive[0]; li[0].getElementsByTagName('p')[0].style.color = colorActive; li[0].style.borderBottom = '2px solid '+colorActive; for(var i=0;i<li.length;i++){ li[i].onclick=function(){ var img = document.getElementById("nav").getElementsByTagName('img'); for(var j=0;j<li.length;j++){ li[j].getElementsByTagName('img')[0].src = imageUrls[j]; li[j].getElementsByTagName('p')[0].style.color = color; li[j].style.borderBottom = '2px solid '+color; } var imgUrl = this.getElementsByTagName('img')[0].src.split('/'); var imgUrl = imgUrl[imgUrl.length-1]; console.log(imgUrl) var imgUrl = imgUrl.split('.'); console.log(imgUrl) console.log(imgUrl[0]+'-1.'+imgUrl[1]) this.getElementsByTagName('img')[0].src = imageUrlsActive[parseInt(this.id)] this.getElementsByTagName('p')[0].style.color = colorActive; this.style.borderBottom = '2px solid '+colorActive; } }
相关推荐
原生 JavaScript 编写,无需任何依赖; 支持 UMD 规范; 支持 E6 模块,提供功能独立的 ES6 模块; Anchors 模块:类似 AnchorJS 基础功能模块,自动分析段落层级 Drawer 模块:独立的侧滑窗口模块 Chapters 模块:...
|- components/top 自定义导航栏组件 |- icons 图标目录 |- pages 页面路径 |- store 小程序缓存等 |- utils 工程工具类 |- app.js 工程入口 |- app.json 小程序原生配置 |- app.wxss 部分公共样式 |- config.js ...
4.导航栏添加图标。 5.修改已知BUG。 vip-admin Html v1.7.0.zip 更新时间:2017-05-21 1.优化主题样式细节。 2.标签新增双击关闭当前标签功能。 3.标签新增右键功能。 4.新增js功能。 详细可...
自定义动画 Tab 导航栏react-navigation v5 风俗 风俗 使用 RemixIcons v2.5 的自定义图标库 预习 这个怎么运作 首先运行yarn install && cd ios && pod install && cd .. 或者npm install && cd ios && pod ...
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板,统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...
5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...
-修正EnableMaximize属性不能使Window最大化的BUG,修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性,比如以前这样定义SystemIcon="Close",现在需要这样定义Icon="SystemClose"。 -Window...
-修正EnableMaximize属性不能使Window最大化的BUG,修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性,比如以前这样定义SystemIcon="Close",现在需要这样定义Icon="SystemClose"。 -Window...
3.10 指定附注栏 46 3.11 创建页脚 50 3.12 创建通用容器 53 3.13 使用ARIA改善可访问性 56 3.14 为元素指定类别或ID名称 59 3.15 为元素添加title属性 61 3.16 添加注释 62 第4章 文本 63 ...
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板,统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...