网站开发进阶(二十七)导航栏高亮显示
【摘要】 HTML & JS导航栏高亮显示
项目开发过程中，需要满足最基本的需求毋庸置疑。截图如下:
需求
当选择中某一行时，某一栏目突出显示，即更换背景或添加背景色。
实现
倒腾了一天，自己是真的没招啦。暂时放弃！
项目中其它模块完成的差不多了，自己还是得回来完成二维码信息的集成与导航栏高亮显示功能。
二...
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
美文美图
文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。
原文链接：shq5785.blog.csdn.net/article/details/50517501
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）