参考:http://amazeui.clouddeep.cn/javascript/tabs/
效果:
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>amazeUI tab</title> <link rel="stylesheet" href="css/amazeui.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/amazeui.min.js"></script> </head> <body> <div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-my-tabs"> <ul class="am-tabs-nav am-nav am-nav-tabs"> <li class="am-active"><a href="">tab1</a></li> <li><a href="">tab2</a></li> <li><a href="">tab3</a></li> </ul> <div class="am-tabs-bd"> <div class="am-tab-panel am-active"> <p>选项卡1内容</p> </div> <div class="am-tab-panel"> <p>选项卡2内容</p> <p>选项卡2内容</p> </div> <div class="am-tab-panel"> <p>选项卡3内容</p> <p>选项卡3内容</p> <p>选项卡3内容</p> </div> </div> </div> <script> $(function() { $('#doc-my-tabs').tabs(); }) </script> </body> </html>