HTML & JS导航栏高亮显示

举报
SHQ5785 发表于 2022/12/08 08:47:55 2022/12/08
【摘要】 项目开发过程中，需要满足最基本的需求毋庸置疑。截图如下: 需求      当选择中某一行时，某一栏目突出显示，即更换背景或添加背景色。实现      倒腾了一天，自己是真的没招啦。暂时放弃！      项目中其它模块完成的差不多了，自己还是得回来完成二维码信息的集成与导航栏高亮显示功能。      二维码信息集成实现了，就剩导航栏高亮显示这块硬骨头了，自己一定要啃下来，嚼碎！加油！     ...

项目开发过程中，需要满足最基本的需求毋庸置疑。截图如下:

 

需求

      当选择中某一行时，某一栏目突出显示，即更换背景或添加背景色。

实现

      倒腾了一天，自己是真的没招啦。暂时放弃！

      项目中其它模块完成的差不多了，自己还是得回来完成二维码信息的集成与导航栏高亮显示功能。

      二维码信息集成实现了，就剩导航栏高亮显示这块硬骨头了，自己一定要啃下来，嚼碎！加油！

      尝试借鉴二维码信息集成的经验，通过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.Learn AngularJS With These 5 Practical Examples - Tutorialzine

2.新浪博客

3.希赛网_专注在线教育21年

​

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入