如上图：话不多说，贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>限时特卖</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/api.css"/>-->
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style>
#bgcolor{
background-color: #f3f3f3;
}
#temai{
height: 40px;
width: 100%-20px;
background: #FFFFFF;
}
.aui-tab {
margin-bottom: 15px;
}
</style>
</head>
<body id="bgcolor">
<div id="temai">
<ul>
<li>
<img src="../image/image_global_logo_home.png" style="height: 28px; margin: 1px;float: left;margin-top: 10px;" />
<p style="font-size: 18px;margin-top: 20px; text-align: center;padding-top: 13px;">限时特卖</p>
</li>
</ul>
</div>
<div class="aui-tab">
<ul class="aui-tab-nav" id="demo1">
<li class="active">标签一</li>
<li>标签二</li>
<li>标签三</li>
<li>标签四</li>
<li>标签五</li>
<li>标签六</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function () {
//实现切换功能
api.parseTapmode();
var demo1 = $api.domAll("#demo1 li");
for(var i in demo1){
$api.addEvt(demo1[i], 'click', function(){
$api.removeCls($api.dom("#demo1 li.active"),'active');
$api.addCls(this,'active');
});
}
}
</script>
</html>
来源：CSDN
作者：rosener
链接：https://blog.csdn.net/rosener/article/details/52267019