练习制作tab菜单

最新推荐文章于 2025-10-08 18:12:36 发布

最新推荐文章于 2025-10-08 18:12:36 发布 · 137 阅读

文章标签：

#jQuery #CSS #JavaScript #XHTML #HTML #ViewUI

web前端学习专栏收录该内容

19 篇文章

订阅专栏

用到jQuery

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" />
<link href="style/basic.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="style/jquery-1.3.2.js"></script>
<script type="text/javascript">
 (function(){
  var imgnum=1;
  var changstart;
 function changimg(){
	 imgnum=(imgnum>5)? '1':imgnum;
	 $('#tagview img').attr('src',function(){return 'img/tagview/img'+imgnum+'.gif';});
	 //alert($("#tagview img").attr('alt'));
	 $("#tagview a").removeClass('here');
	 $("a:contains("+imgnum+")").addClass('here');
	 imgnum++; 
	 }
 changstart=setInterval(function(){changimg(imgnum);},2500); 
 function aa(){
  $('#tagview ul a').mouseover(function(){ //alert($('#tagview img'));
									 $("#tagview a").removeClass('here');
									 $(this).addClass('here');
									 clearInterval(changstart);
									 imgnum=$(this).text();
									 $('#tagview img').attr('src',function(){return 'img/tagview/img'+imgnum+'.gif';});
									 });
  $('#tagview ul a').mouseout(function(){changstart=setInterval(function(){changimg(imgnum);},2500);});
  }
  window.onload= aa;
 })()
</script>
<link href="style/home.css" rel="stylesheet" type="text/css" />

</head>

<body>
          <div id="tagview">
          <a href="#"><img alt='图片展示'/></a>
          <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          </ul>
          </div>
</body>
</html>

css代码为：

@charset "utf-8";
/* CSS Document */
#tagview{
	position:relative;
	margin-top:10px;
	width:376px;
	height:186px;}
#tagview img{
	z-index:10;
	width:370px;
	height:180px;
	padding:0;
	margin:0;}
#tagview ul{
	position:absolute;
	right:0;
	bottom:0;
	list-style:none;
	padding:10px 10px;
	margin:0;
	z-index:20;
	}
#tagview li{
	float:left;}
#tagview ul a{
	color:#FFF;
	display:block;
	text-decoration:none;
	margin:3px;
	width:17px;
	height:17px;
	text-align:center;
	background-color:#5c5f63;}
#tagview ul a.here{
	background-color:#d39635;
	border:#FFF 1px solid;
	width:15px;
	height:15px;}
#tagview ul a:hover{
	background-color:#d39635;
	border:#FFF 1px solid;
	width:15px;
	height:15px;}

运行效果：

http://www.everbeing.cn/

问题总结：

1.在<script>标签中写js代码时要把过程包装成function函数，然后把函数传递给window.onload(传的是函数名，不带

括号的)，不然，jQuery的$（）取值为空;

2.setInterval()函数里面的执行函数传递的是函数名，如果要带参数，要包装到function(){}匿名函数里