peak
peak
  • 发布:2015-10-16 11:31
  • 更新:2015-10-21 14:23
  • 阅读:4341

页面底部固定文字图片选项卡,怎么实现点击更换图片

分类:MUI

MUI页面底部固定形式的文字图片选项卡,如果实现使用自定义的图片,点击后图片更换为另一张自定义图片,文字颜色也改变为自定义的颜色?如果背景颜色可以自定义修改变化就更好了。

<nav class="mui-bar mui-bar-tab">  
  <a class="mui-tab-item mui-active" href="#tabbar">  
        <span class="mui-icon mui-icon-phone"></span>  
        <span class="mui-tab-label">电话咨询</span>  
    </a>  
    <a class="mui-tab-item" href="#tabbar-with-chat">  
        <span class="mui-icon mui-icon-chat"></span>  
        <span class="mui-tab-label">在线咨询</span>  
    </a>  
    <a class="mui-tab-item" href="#tabbar-with-sms">  
        <span class="mui-icon mui-icon-sms"></span>  
        <span class="mui-tab-label">短信咨询</span>  
    </a>  
    <a class="mui-tab-item" href="#tabbar-with-map">  
        <span class="mui-icon mui-icon-map"></span>  
        <span class="mui-tab-label">查看地图</span>  
    </a>  
</nav>
2015-10-16 11:31 负责人:无 分享
已邀请:
peak

peak (作者)

问题已解决,解决方案如下:
1、字体颜色,新建一个css文件,创建样式.mui-bar-tab .mui-tab-item.mui-active{color:#e63c60;}覆盖mui.min.css样式文件下的样式.mui-bar-tab .mui-tab-item.mui-active{color:#007aff};这样选中的tab颜色就为红色。
2、tab中使用自定义的图片,点击后图片变化的问题。
新建一个样式文件,创建tab中四个图片的选中前后的样式,代码如下:
.tab-bottom-introduce{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_introduce.png); /tab1选中前的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}
.mui-active .tab-bottom-introduce{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_introduce_checked.png); /tab1选中后的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}
.tab-bottom-faq{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_faq.png); /tab2选中前的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}
.mui-active .tab-bottom-faq{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_faq_checked.png); /tab2选中后的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}
.tab-bottom-notice{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_notice.png); /tab3选中前的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}
.mui-active .tab-bottom-notice{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_notice_checked.png); /tab3选中后的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}
.tab-bottom-apply{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_apply.png); /tab4选中前的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}
.mui-active .tab-bottom-apply{
width:100%;
height:100%;
margin: 0;
padding: 0;
background-color:#F5F5F5;
background-image:url(../img/bottom_icon_apply_checked.png); /tab4选中后的图片地址/
background-origin:content; /从content区域开始显示背景/
background-position:50% 50%; /图片上下左右居中/
background-size:contain; /保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域/
background-repeat:no-repeat; /图像不重复显示/
}

不知道

不知道

可以实现换图标和颜色;
用js 替换对应的class就可以了。

Danny

Danny - QQ125904483

更改:active样式表

  • peak (作者)

    在你的提示下,修改了mui.min.css中.mui-tab-item.mui-active的颜色值,选中后的颜色变成了红色。多谢。 现在剩下一个问题就是底部的选项卡都是自己开发设计的图标,且选中后图标变化较大,有什么简洁的方法吗?难道只能通过js每个图片?

    2015-10-21 09:56

  • Danny

    不要直接修改mui.min.css,版本升级会覆盖的,自己新建css文件,覆盖mui.min.css同名样式。不想使用mui的图标,就自己扩展使用其他的图标字体,比方说:fontawesome

    2015-10-21 10:16

  • peak (作者)

    回复 Danny:多谢,弄好了。

    2015-10-21 14:15

该问题目前已经被锁定, 无法添加新回复