app运用api.js选项切换

原创于 2017-06-11 09:59:17 发布 · 897 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#app

apicloud 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用背景图片实现高亮切换效果的方法。通过HTML、CSS和JavaScript结合，实现了两个选项之间的高亮状态切换。当点击选项时，通过toggleCls方法改变元素的样式类，从而更换背景图片达到视觉上的高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提，高亮显示运用的是背景图片，仅有两个选项

html部分

js部分

function tabselect(){
         $api.toggleCls($api.dom('.person1'), 'actived');
           $api.toggleCls($api.dom('.person2'), 'actived');
      }

           </script>

css部分

    .aui-tab-nav li:not(actived){
     background:url('../image/rectangle-02/rectangle-2.png') no-repeat center center;
     color:#999;
     background-size:100% 40px;
     line-height:42px;
}

.aui-tab-nav .actived{
   background:url('../image/rectangle-2/rectangle-2-copy.png') no-repeat center center;
   color: #fff;
   background-size:100% 50px;
   line-height:42px;
   }