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

分类：MUI

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 负责人:无分享

3 个回复

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 - 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

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

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

3 个回复

公告

相关问题

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

与内容相关的链接

3 个回复

公告

相关问题