网站开发进阶(二十七)导航栏高亮显示
来源:互联网 发布:ddos网络层攻击 编辑:程序博客网 时间:2024/06/05 04:34
HTML & JS导航栏高亮显示
项目开发过程中,需要满足最基本的需求毋庸置疑。截图如下:
需求
当选择中某一行时,某一栏目突出显示,即更换背景或添加背景色。
实现
倒腾了一天,自己是真的没招啦。暂时放弃!
项目中其它模块完成的差不多了,自己还是得回来完成二维码信息的集成与导航栏高亮显示功能。
二维码信息集成实现了,就剩导航栏高亮显示这块硬骨头了,自己一定要啃下来,嚼碎!加油!
尝试借鉴二维码信息集成的经验,通过localStorage进行值的传输。
几经波折,宣布使用localStorage失败。还是回归到最基本的DOM操作中。
感悟
遇到棘手的问题,应首先考虑使用最基本的方法进行解决。要相信再高级的方法也是基于基本方法的。不要抛弃本源。
核心代码
<div class="row Noprint" > <div class="col-md-11"> <div class="list-group"> <a href="javascript:void(0);" class="list-group-item active" >全部操作 </a> <a ui-sref="shop_MedManag" id="1" class="list-group-item">药品维护</a> <a ui-sref="shop_billManag" id="2" class="list-group-item" >订单维护</a> <a ui-sref="shop_ybMaintain" id="3" class="list-group-item">医保卡退款</a> <a ui-sref="bill_StatementMaintain" id="4" class="list-group-item">订单报表维护</a> <a ui-sref="med_RequestMaintain" id="5"class="list-group-item">找药请求维护</a> <a ui-sref="shop_Status" id="6" class="list-group-item">状态设置</a> <a ui-sref="shop_reLogin" id="7" class="list-group-item">注销</a> <a ui-sref="shop_alterPasswd" id="8" class="list-group-item">改密</a> </div> </div></div><script>var tag; var lenth = 8;// 默认设置if(typeof(tag) == "undefined") {document.getElementById("1").style.backgroundColor = "pink";}document.getElementById("1").onclick = function() {tag = 1;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";}};document.getElementById("2").onclick = function() {tag = 2;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";}};document.getElementById("3").onclick = function() {tag = 3;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";}};document.getElementById("4").onclick = function() {tag = 4;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";}};document.getElementById("5").onclick = function() {tag = 5;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";} };document.getElementById("6").onclick = function() {tag = 6;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";}};document.getElementById("7").onclick = function() {tag = 7;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";}};document.getElementById("8").onclick = function() {tag = 8;// 设置背景色document.getElementById(tag).style.backgroundColor = "pink";// 取消背景色for(i=1; (i<=lenth && i!=tag); i++){document.getElementById(i).style.backgroundColor = "";}};if(tag == "1") {document.getElementById("1").style.backgroundColor = "pink";}if(tag == "2") {document.getElementById("2").style.backgroundColor = "pink";}if(tag == "3") {document.getElementById("3").style.backgroundColor = "pink";}if(tag == "4") {document.getElementById("4").style.backgroundColor = "pink";}if(tag == "5") {document.getElementById("5").style.backgroundColor = "pink";}if(tag == "6") {document.getElementById("6").style.backgroundColor = "pink";}if(tag == "7") {document.getElementById("7").style.backgroundColor = "pink";}if(tag == "8") {document.getElementById("8").style.backgroundColor = "pink";}</script>
有图有真相
管理端
药店端
参考文献
1.http://tutorialzine.com/2013/08/learn-angularjs-5-examples/
2.http://blog.sina.com.cn/s/blog_6d01cce30101jrdw.html
3.http://www.educity.cn/wenda/53538.html
美文美图
1 0
- 网站开发进阶(二十七)导航栏高亮显示
- ReportStudio进阶教程(二十七) - 地图开发(一)Hello Map
- 网站开发进阶(二十一)Angular项目信息错位显示问题解决
- 网站开发进阶(二十八)初探localStorage
- android开发进阶导航
- 网站开发进阶(十七)Html元素隐藏的几种方式
- 【FastDev4Android框架开发】Volley完全解析之进阶最佳实践与二次封装(二十七)
- mysql进阶(二十七)数据库索引原理
- Python进阶(二十七)-字符串大小写转换
- 网站开发进阶(二十四)HTML颜色代码表
- 网站开发进阶(二十六)js刷新页面方法大全
- 网站开发进阶(二十九)HTML特殊转义字符
- iOS开发之高级视图—— UINavigationController(二)简单导航功能进阶
- AngularJS进阶(二十七)实现二维码信息的集成思路
- Java进阶(二十七)使用Dom4j解析XML文件
- Android进阶(二十七)Android原生扰人烦的布局
- C语言开发总结(二十七)
- 二十七、开发第一个storm任务
- 苹果开发那些事儿-D-U-N-S 号申请
- iOS怎么实现不进appstore的增量更新?(类似各种游戏,12306)
- 【总结】MySQL数据库
- 【CS231n】-学习笔记-1-Intro to Computer Vision, historical context.
- Codeforces Beta Round #91 (Div. 2 Only)深度优先
- 网站开发进阶(二十七)导航栏高亮显示
- 【总结】MySQL性能优化
- [leetcode] 319. Bulb Switcher 解题报告
- 0814-应用程序管理(笔记)
- caffe框架翻译-理解(转载)
- 自学ios——基础篇
- 禁止屏幕旋转
- Excel数据处理:多单元格内容合并,一题多解
- FOJ Problem 1004 Number Triangle