一、目录结构
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><script defer async="true" data-main="main" src="../../bower_components/requirejs/require.js"></script><link rel="stylesheet" href="app/nav.css"/><title>用avalon制作导航</title></head><body><div class="navColor" ms-controller="demo"><ul class="_navCenter"><li ms-repeat-el="nav" ms-click="show()"><a ms-attr-href="el.src" ms-text="el.Navname"></a></li></ul></div></body></html>/** * Created by s9-1102 on 2015/5/7. */require.config({ paths:{‘avalon‘:‘../../bower_components/avalon.oniui/avalon.min‘,‘jquery‘:‘../../bower_components/jquery/dist/jquery.min‘}})require([‘app/nav‘])/** * Created by s9-1102 on 2015/5/7. */define([‘avalon‘,‘jquery‘],function(){ avalon.ready(function(){var navdemo = avalon.define({ $id:‘demo‘, nav:[], show:function(){ $(this).addClass(‘navHover‘).siblings().removeClass(‘navHover‘);}}) $.get(‘app/nav.json‘,function(json){ navdemo.nav=json; $("._navCenter li").eq(0).addClass(‘navHover‘);}); console.log(navdemo.nav); avalon.scan();})})[{"Navname":"首页","src":"javascript:"},{"Navname":"个性玩法","src":"javascript:"},{"Navname":"门票","src":"javascript:"},{"Navname":"美食","src":"javascript:"},{"Navname":"交通","src":"javascript:"},{"Navname":"签证","src":"javascript:"},{"Navname":"游玩","src":"javascript:"},{"Navname":"讨论","src":"javascript:"},{"Navname":"关于我们","src":"javascript:"}]*{margin:0;padding:0;font-family:"Microsoft YaHei","Myriad Pro","Hiragino Sans GB",Calibri,Helvetica, tahoma, arial, simsun, sans-serif}.navColor{ height:35px; background-color:#ff6600; line-height:35px; font-size:15px;}._navCenter{ padding:050px; list-style: none;}._navCenter li{float: left;}._navCenter li a{ display:inline-block; padding:030px; color:#fff; text-decoration: none;}._navCenter li a:hover{ background-color:#ff9b59;}.navHover{ background-color:#ff9b59;}原文：http://www.cnblogs.com/Zjingwen/p/4486483.html