主要用於運維繫統， 對界面要求不高的場合。 深深感到自己頁面設計能力弱爆了，只能藉用一下了， 互動邏輯還可以勝任一點。 直接貼代碼: 1. HTML 頁面及JS 交互， 注意引入Jquery 文件 複製代碼 程式碼如下: 两级导航菜单的示例 <br><br>var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] <br>function showtime() { <br>var date = new Date(); <br>var yy = date.getYear(); <br>if (yy < 1900) { <br>yy = yy + 1900; <br>} <br>var MM = date.getMonth()+1; <br>if(MM<10) MM = '0' + MM; <br>var dd = date.getDate(); <br>if(dd<10) dd = '0' + dd; <br>var hh = date.getHours(); <br>if(hh<10) hh = '0' + hh; <br>var mm = date.getMinutes(); <br>if(mm<10) mm = '0' + mm; <br>var ss = date.getSeconds(); <br>if(ss<10) ss = '0' + ss; <br>var ww = weeks[date.getDay()]; <br>$('#currTime span').html('[ ' + yy + '-' + MM + '-' + dd + ' ' + hh + ':' + mm + ':' + ss + ' ' + ww + ' ]'); <br>window.setTimeout("showtime()", 1000); <br>} <br><br>var setContentSize = function(height, width) { <br>$('header').css('width', width); <br>$('#topnav').css('width', width); <br>$('#nav').css('width', width); <br>$('#content').css('height', height + 'px'); <br>$('#content').css('width', width); <br>$('#maincontent').css('height', height + 'px' ); <br>$('#maincontent').css('width', width); <br>} <br><br>$(document).ready( <br>function() { <br><br>var docHeight = $(document).outerHeight(); <br>var docWidth = $(document).width(); <br>var headerHeight = $('#header').height(); <br>var contentHeight = docHeight-headerHeight; <br><br>$('#topnav a').click( <br>function() { <br>$('.select').removeClass('select'); <br>$(this).addClass('select'); <br>console.log($(this).css('background-color')); <br>$('#nav').css('background-color', $(this).css('background-color')); <br>$('#nav').css('width', $('#topnav').width()); <br>switch(this.id) { <br>case 'topmenu_home': <br>$('.nav_list').hide(); <br>$('#homebo').show(); <br>$('#homebo a').first().click(); <br>break; <br>case 'topmenu_itlearn': <br>$('.nav_list').hide(); <br>$('#itlearnbo').show(); <br>$('#itlearnbo a').first().click(); <br>break; <br>case 'topmenu_baike': <br>$('.nav_list').hide(); <br>$('#baikebo').show(); <br>$('#baikebo a').first().click(); <br>break; <br>case 'topmenu_scisrc': <br>$('.nav_list').hide(); <br>$('#scisrcbo').show(); <br>$('#scisrcbo a').first().click(); <br>break; <br>case 'topmenu_more': <br>$('.nav_list').hide(); <br>$('#morebo').show(); <br>$('#morebo a').first().click(); <br>break; <br>default : break; <br>} <br><br>} <br>); <br><br>$('#nav a').click( <br>function() { <br>setContentSize(contentHeight, docWidth-15); <br>$('#nav .select').removeClass('select'); <br>$(this).addClass('select'); <br>switch(this.id) { <br>case 'myblogModule': <br>$('#maincontent').attr('src', 'http://blog.csdn.net/lovesqcc'); <br>break; <br>case 'ifeveModule': <br>setContentSize(contentHeight+80, docWidth-15); <br>$('#maincontent').attr('src', 'http://ifeve.com/'); <br>break; <br>case 'csdnModule': <br>$('#maincontent').attr('src', 'http://csdn.net'); <br>break; <br>case 'infoqModule': <br>$('#maincontent').attr('src', 'http://www.infoq.com/cn/'); <br>break; <br>case 'boleModule': <br>$('#maincontent').attr('src', 'http://blog.jobbole.com/'); <br>break; <br>case 'itcommentModule': <br>$('#maincontent').attr('src', 'http://www.vaikan.com/'); <br>break; <br>case 'wikiModule': <br>$('#maincontent').attr('src', 'http://zh.wikipedia.org/zh-tw/Wikipedia'); <br>break; <br>case 'zhihuModule': <br>$('#maincontent').attr('src', 'http://www.zhihu.com/'); <br>break; <br>case 'acmModule': <br>$('#maincontent').attr('src', 'http://www.acm.org/'); <br>break; <br>case 'xiamiModule': <br>$('#maincontent').attr('src', 'http://www.xiami.com'); <br>break; <br>case 'opencourseModule': <br>$('#maincontent').attr('src', 'http://v.163.com/special/ted10collection/'); <br>break; <br>default: <br>break; <br>} <br><br>} <br>); <br>$('.nav_list').hide(); <br>$('#topmenu_home').click(); <br>showtime(); <br>} <br>); <br> 两级导航菜单 两级导航菜单的示例 [ 你好: admin ] [ 提建议 ] 首页 IT学习 百科 学术资源 更多 我的博客 并发编程网 CSDN Infoq 伯乐在线 外刊评论 WIKI百科 知乎 ACM 虾米音乐 网易公开课
