急急~~关于css控制 tab菜单选中状态的问题

Posted 2023-05-06

我的代码是移上去可以变色,是根据图片变色的..代码如下...我希望可以点中后跟移上去是一样的颜色,然后再点击另一个,刚才那个还原,新点击那个就变颜色..
===以下CSS
bodymargin:0;
padding:0;
font-size:12px;
font-family:"宋体";
float:right;

#tabsF
margin:0;
float:right;
width:750;
line-height:normal;
border-bottom:1px solid #666;/*控制整个背景*/
#tabsF ul

padding:0;margin:0;list-style-type:none;position:relative;
#tabsF li
display:inline;
margin:0;
padding:0;
list-style-type:none;
#tabsF li ul
display: none;
#tabsF a
float:left;
background:url("images/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
#tabsF a span
float:left;
display:block;
background:url("images/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#000000;/*控制每一个单元格*/
#tabsF a span float:none;
#tabsF a:hover span color:#FFF;
#tabsF a:hover background-position:0% -42px;
#tabsF a:hover span background-position:100% -42px;
#tabsF #current a background-position:0% -42px;
#tabsF #current a span background-position:100% -42px;
#tabsF ul li:hover ul display:block; position:absolute; top:23px; left:233px; width:80px

参考技术A 这就要用JavaScript了
设置onmouseover 和onclick

记录一下做小程序tab切换并保存check选中状态的操作。

　　这里需要记录下你当前选中check的状态（具有唯一性的都可以）。我是直接存在storage里面了。然后切换的时候拿数据列表的值和缓存中的值进行比较。如果符合的话就选中。但是一般的单层for循环无法完成。会有一些问题达不到目的。利用双层循环的话来比对他们的值就行了

　　

　　 reg  = "缓存数组中的值"
    this.goodsList = "拿到的数据"
     for (let i = 0; i < this.goodsList.length; i++) 
         for (let j = 0; j < reg.length; j++) 
            if(this.goodsList[i].id == reg[j])
               console.log("完美匹配");
               this.goodsList[i].check = true;
            else
               console.log("没有匹配到");