网站开发进阶(二十七)导航栏高亮显示
2016-01-14 15:02
801 查看
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
美文美图
相关文章推荐
- 学习网站收集
- 阿里云服务器架设javaweb网站全攻略
- 初步折腾网站之感想
- android 网站总结
- java网站模版 Bootstrap HTML5 企业源码 项目源码
- 网站要如何甄选关键词?
- 大型网站架构技术的核心价值是随网站所需灵活应对
- 服务器架构资料整理
- 提取网站图片
- 从网站中把数据都读到一个文本文件中。
- JAVA通过Session和Cookie实现网站自动登录的技术
- 基于彻底解耦合的实验性iOS架构
- HA高可用集群
- LVS原理详解及部署之五:LVS+keepalived实现负载均衡&高可用
- web开发性能优化---项目架构篇
- 去除优酷、土豆、酷六、百度、奇艺、CNTV、新浪、乐视、搜狐等视频网站15秒广告的方法
- 2015年12月钓鱼网站域名涉及注册商分析:阿里居首
- J2EE开发环境的搭建
- 域名配置_网站邮箱设置_json学习_2016.01.13回顾
- HTML5前端(移动端网站)性能优化指南