jQuery 菜单项切换

来源：互联网发布：里约热内卢知乎编辑：程序博客网时间：2024/05/17 20:25
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>ul {list-style: none;padding: 0;margin: 0;}.menu li {background: gray;text-align: center;line-height: 30px;padding: 5px 10px;width: 50px;color: white;float: left;margin-right: 2px;}.menu li.tableIn {background-color: #003580;border: 1px solid #003580;}.menu:after {content: '';display: block;clear: both;overflow: hidden;}.content {display: block;background: #003580;width: 300px;height: 300px;color: white;padding: 5px 10px;}.defaut {display: none;}#load_menu li {float: left;padding: 3px 5px;color: blue;height: 30px;line-height: 30px;position: relative;z-index: 99;}#load_menu:after{content: '';display: block;clear: both;overflow: hidden;}#load_menu .load_tableIn {background: lightgray;border: 1px solid black;border-bottom: 0;}#load_content {width: 400px;height: 300px;background: lightgray;clear: both;border: solid 1px black;position: relative;top: -2px;padding-top: 30px;}</style><script src="../jquery-2.2.4.min.js"></script><script>$(window).load(function() {var timeOutID = null;$('.menu li').hover(function() {var me = $(this);//防止快速点击的方法。。。//注意保留timeID,不然无法清除//注意timeOut的第一个参数要写在本行timeOutID = setTimeout(function() {me.addClass('tableIn');var lis = $('.menu li');lis.each(function(index, value) {var contentDiv = $('.container').children('div').eq(index);//要转换为元素再等if (me.get(0) != value) {$(value).removeClass('tableIn');contentDiv.removeClass('content');contentDiv.addClass('defaut');} else {contentDiv.removeClass('defaut');contentDiv.addClass('content');}});}, 300);}, function() {clearTimeout(timeOutID);})//默认加载本地页面$('#load_content .real_content').load("testload.html");$('#load_menu li').on('click', function() {var me = $(this);//注意timeOut的第一个参数要写在本行me.addClass('load_tableIn');var lis = $('#load_menu li');lis.each(function(index, value) {var contentDiv = $('#load_content .real_content');//要转换为元素再等if (me.get(0) != value) {$(value).removeClass('load_tableIn');} else {if (index == 0) {contentDiv.load("testload.html");} else if (index == 1) {//这里没JSP，就没写了，也是用load方法} else if (index == 2) {}}});})});</script></head><body><div class="container"><ul class="menu"><li class="tableIn">标签1</li><li>标签2</li><li>标签3</li></ul><div class="content">内容1</div><div class="defaut">内容2</div><div class="defaut">内容3</div></div><br /><br/><ul id="load_menu"><li class="load_tableIn">加载完整页面</li><li>加载部分JSP</li><li>加载全部JSP</li></ul><div id="load_content"><div class="real_content"></div></div></body></html>
0 0