jquery tab菜单切换效果

其他 2018-07-16 17:15:52 阅读次数: 0

第一种：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
li{
display: block;
padding: 0;
cursor: pointer;
float: left;
height: 40px;
background:
rgb(66, 145, 66);
text-align:center;
line-height: 40px;
}
li a{text-decoration: none;color: #000;
}
</style>
</head>
<body>
<div>
<ul>
<span style="white-space:pre">	</span><li><a href="javascript:void(0)">tab1</a></li>
<span style="white-space:pre">	</span><li><a href="javascript:void(0)">tab2</a></li>
<span style="white-space:pre">	</span><li><a href="javascript:void(0)">tab3</a></li>
<span style="white-space:pre">	</span><li><a href="javascript:void(0)">tab4</a></li>
<span style="white-space:pre">	</span><li><a href="javascript:void(0)">tab5</a></li>
</ul>
</div>
</body>

<script>
var $lis = $('li');//获取li对象
var liWidth = 100; //li默认宽度
var ulWidth = $lis.length * liWidth; //ul宽度
var liHoverWidth = 140; //鼠标划过时li宽度
var afterWidth = (ulWidth - liHoverWidth)/($lis.length - 1);//划过时其他li宽度


$(function(){

 $('li').css({width: liWidth});


 $('li').hover(function(){
  $(this).stop().animate({width: liHoverWidth});//当前li宽度变宽
$(this).css({background:"rgb(13, 105, 134)"});//当前li背景色变化
  $(this).siblings().stop().animate({width: afterWidth+"px"});//其他li宽度缩小
 },function(){
  $('li').stop().animate({width: liWidth+"px"});//所有li恢复默认宽度
  $('li').css({background: "green"});//其他li宽度缩小
 });
})
</script> 
</html>







第二种：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
<style>
BODY {
	FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif "宋体";  COLOR: #333; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; LINE-HEIGHT: 24px; PADDING-RIGHT: 0px
}
.outer_menu {
	WIDTH: 900px; MARGIN: 0px auto;HEIGHT:50px;
}.menu {
	HEIGHT: 50px; WIDTH: 900px; BACKGROUND: red;
}
.menu_top {
	HEIGHT: 30px; LINE-HEIGHT: 30px; BACKGROUND: blue;
}
.menu_top UL {
	LIST-STYLE-TYPE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
.menu_top UL LI {
	CURSOR: pointer; FONT-SIZE: 12px; HEIGHT: 30px; WIDTH: 90px; FLOAT: left; FONT-WEIGHT: bold; COLOR: #eee; TEXT-ALIGN: center; MARGIN: 0px; DISPLAY: block; LINE-HEIGHT: 30px
}
.menu_top UL LI A {
	TEXT-DECORATION: none; COLOR: #eee
}
.menu_top UL LI A:visited {
	TEXT-DECORATION: none; COLOR: #eee
}
.menu_top UL LI A:hover {
	TEXT-DECORATION: none; COLOR: #eee
}
.nav_on {
	CURSOR: pointer; HEIGHT: 30px; WIDTH: 90px; BACKGROUND: red; FLOAT: left; COLOR: #eee; TEXT-ALIGN: center; MARGIN: 0px; DISPLAY: block; LINE-HEIGHT: 30px
}
.menu_con {
	HEIGHT: 25px; WIDTH: 900px; FLOAT: left; TEXT-ALIGN: center; LINE-HEIGHT: 25px
}
#qh_con0 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con1 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con2 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con3 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con4 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con5 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con6 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con7 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con8 {
	WIDTH: 900px; TEXT-ALIGN: center; CLEAR: both
}
#qh_con0 UL {
	LIST-STYLE-TYPE: none; PADDING-LEFT: 25px; MARGIN: 0px
}
#qh_con1 UL {
	LIST-STYLE-TYPE: none; PADDING-LEFT: 125px; MARGIN: 0px
}
#qh_con2 UL {
	LIST-STYLE-TYPE: none; PADDING-LEFT: 225px; MARGIN: 0px
}
#qh_con3 UL {
	LIST-STYLE-TYPE: none; PADDING-LEFT: 325px; MARGIN: 0px
}
#qh_con4 UL {
	LIST-STYLE-TYPE: none; PADDING-LEFT: 225px; MARGIN: 0px
}
#qh_con5 UL {
	LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-RIGHT: 125px
}
#qh_con6 UL {
	LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-RIGHT: 75px
}
#qh_con7 UL {
	LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-RIGHT: 45px
}
#qh_con8 UL {
	LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-RIGHT: 25px
}
#qh_con0 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: left; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con1 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: left; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con2 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: left; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con3 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: left; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con4 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: left; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con5 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: right; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con6 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: right; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con7 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: right; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con8 UL LI {
	HEIGHT: 20px; FONT-FAMILY: "宋体"; FLOAT: right; COLOR: #edc1c1; TEXT-ALIGN: center; LINE-HEIGHT: 20px
}
#qh_con0 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con1 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con2 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con3 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con4 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con5 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con6 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con7 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con8 UL LI SPAN {
	MARGIN: 0px 10px
}
#qh_con0 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con1 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con2 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con3 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con4 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con5 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con6 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con7 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con8 UL LI A {
	COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con0 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con1 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con2 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con3 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con4 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con5 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con6 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con7 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#qh_con8 UL LI A:hover {
	TEXT-DECORATION: underline; COLOR: #f4d5d5; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
</style>  
</head>
<body>
<div class="outer_menu" id="university3" flag="1">
<DIV class=menu>
<DIV class=menu_top>
<UL>
<LI><A onmouseover=javascript:qiehuan(0) id=mynav0 class=nav_on href="javascript:void(0)">新闻中心</A> </LI>
<LI><A onmouseover=javascript:qiehuan(1) id=mynav1 href="javascript:void(0)"><SPAN>学校概况</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(2) id=mynav2 href="javascript:void(0)"><SPAN>机构设置</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(3) id=mynav3 href="javascript:void(0)"><SPAN>人才培养</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(4) id=mynav4 href="javascript:void(0)"><SPAN>学术科研</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(5) id=mynav5 href="javascript:void(0)"><SPAN>招生就业</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(6) id=mynav6 href="javascript:void(0)"><SPAN>合作交流</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(7) id=mynav7 href="javascript:void(0)"><SPAN>教育资源</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(8) id=mynav8 href="javascript:void(0)"><SPAN>校园生活</SPAN></A> </LI>
<LI><A onmouseover=javascript:qiehuan(9) id=mynav9 class=nav_off href="javascript:void(0)"><SPAN>信息公开</SPAN></A> </LI></UL></DIV>
<DIV id=menu_con>
<DIV id=qh_con0 style="DISPLAY: block">
<UL>
<LI><A href="javascript:void(0)" target=_blank>新闻网</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>媒体安大</A><SPAN>|</SPAN> <!--<li><a href="href="javascript:void(0)"">图片社</a><span>|</span></li>--></LI>
<LI><A href="javascript:void(0)" target=_blank>广播新闻</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>电视新闻</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">安徽大学报</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">官方微博</A> </LI></UL></DIV>
<DIV id=qh_con1 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)" target=_blank>学校简介</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>学校标识</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>现任领导</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>历史沿革</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>大事记</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>基本信息</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>校园风光</A> </LI></UL></DIV>
<DIV id=qh_con2 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)" target=_blank>党政部门</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>教学与科研单位</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>科研机构</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>直属单位</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>校办产业</A> </LI></UL></DIV>
<DIV id=qh_con3 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)" target=_blank>本科教学</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>研究生教学</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">教学成果</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>精品课程</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>质量工程</A> </LI></UL></DIV>
<DIV id=qh_con4 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)">学科建设</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">学风建设</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">人文社科</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">科学技术</A> </LI></UL></DIV>
<DIV id=qh_con5 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)" target=_blank>就业指导</A> </LI>
<LI><A href="javascript:void(0)" target=_blank>继续教育</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>国际商学院</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>江淮学院</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>研究生招生</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">本科招生</A><SPAN>|</SPAN> </LI></UL></DIV>
<DIV id=qh_con6 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)" target=_blank>教育基金会</A> </LI>
<LI><A href="javascript:void(0)" target=_blank>校友总会</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">孔子学院</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)">联合办学</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>留学生教育</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>国际交流</A><SPAN>|</SPAN> </LI></UL></DIV>
<DIV id=qh_con7 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)" target=_blank>安徽大学学报</A> </LI>
<LI><A href="javascript:void(0)" target=_blank>安徽大学出版社</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>计算机教学平台</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>网络教学</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>教育实验</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>教育技术</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>图书馆</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>招标信息</A><SPAN>|</SPAN> </LI></UL></DIV>
<DIV id=qh_con8 style="DISPLAY: none">
<UL>
<LI><A href="javascript:void(0)" target=_blank>安徽大学语文</A> </LI>
<LI><A href="javascript:void(0)" target=_blank>师生艺术作品展示网</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>中国传统文化研究院</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>素质教育网</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>纪念李世雄老师</A><SPAN>|</SPAN> </LI>
<LI><A href="javascript:void(0)" target=_blank>安青在线</A><SPAN>|</SPAN> </LI></UL></DIV>
<DIV id=qh_con9 style="DISPLAY: none">
<UL></UL></DIV></DIV></DIV></div>
</body>
<script language="javascript">
function qiehuan(num){
   for(var id = 0;id<=8;id++){
	   if(id==num){
		   document.getElementById("qh_con"+id).style.display="block";
		   document.getElementById("mynav"+id).className="nav_on"; 
	   }else{ 
		   document.getElementById("qh_con"+id).style.display="none";
		   document.getElementById("mynav"+id).className="";    
	   }   
   }  
}
</script>
</html>



猜你喜欢

转载自blog.csdn.net/ragin/article/details/42006837
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022