新手使用mui开发APP，如果遇到底部导航切换图片问题可以了解一下哦

本文分享了使用MUI框架创建底部Tab栏的实战经验，包括HTML结构、CSS样式及常见问题解决，适合初学者参考。

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

第一次开发，遇到很多问题，结合大佬们的博客加mui官方文档给出自己的代码，供新手参考：

html

<nav class="mui-bar mui-bar-tab" id="mui-nav">
			<a class="mui-tab-item mui-active" id="0">
				<span class="mui-icon index"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" id="1">
				<span class="mui-icon check"></span>
				<span class="mui-tab-label">入住办理</span>
			</a>
			<a class="mui-tab-item" id="2">
				<span class="mui-icon my"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

css

<style type="text/css">
			.index{
				background-image: url(img/nav_index.png);
				background-size: 100%;
			}
			.mui-bar-tab .mui-tab-item.mui-active .index{
				background-image: url(img/nav_index_select.png);
				background-size: 100%;
			}
			.check{
				background-image: url(img/nav_check.png);
				background-size: 100%;
			}
			.mui-bar-tab .mui-tab-item.mui-active .check{
				background-image: url(img/nav_check_select.png);
				background-size: 100%;
			}
			.my{
				background-image: url(img/nav_my.png);
				background-size: 100%;
			}
			.mui-bar-tab .mui-tab-item.mui-active .my{
				background-image: url(img/nav_my_select.png);
				background-size: 100%;
			}
			.mui-bar-tab .mui-tab-item.mui-active{
				color: #1bccba;
			}
		</style>