求使用jQuery编写一个导航.

xiangbin77 2008-01-21 05:54:13

求使用jQuery编写一个导航.
像传奇官网的: http://home.mir2.sdo.com/NewWeb/download/index.aspx

...全文

174 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiangbin77 2008-01-22

打赏
举报

页面上有5个img控件, 当我鼠标移动到img1的时候,img1显示,img2,img3,img4,img5都隐藏,依此类推.

用jquery怎么做这种判断?

tantaiyizu 2008-01-22

打赏
举报

呵呵

haiyang19850402 2008-01-22

打赏
举报

你可以用div实现,把图片放在div中,然后控制div的显示就可以了

<!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>
<title>Untitled Page</title>
<script type="text/javascript">
function ImageSwitch(sName)
{
switch(sName)
{
case "image1":
var divs=document.getElementsByTagName("div");
for(i=0;i<divs.length;i++)
{
if(divs[i].id=="div1")
{
document.getElementById(divs[i].id).style.display="block";
}
else
{
document.getElementById(divs[i].id).style.display="none";
}
}
break;
case "image2":
var divs=document.getElementsByTagName("div");
for(i=0;i<divs.length;i++)
{
if(divs[i].id=="div2")
{
document.getElementById(divs[i].id).style.display="block";
}
else
{
document.getElementById(divs[i].id).style.display="none";
}
}
break;
case "image3":
var divs=document.getElementsByTagName("div");
for(i=0;i<divs.length;i++)
{
if(divs[i].id=="div3")
{
document.getElementById(divs[i].id).style.display="block";
}
else
{
document.getElementById(divs[i].id).style.display="none";
}
}
break;
case "image4":
var divs=document.getElementsByTagName("div");
for(i=0;i<divs.length;i++)
{
if(divs[i].id=="div4")
{
document.getElementById(divs[i].id).style.display="block";
}
else
{
document.getElementById(divs[i].id).style.display="none";
}
}
break;
case "image5":
var divs=document.getElementsByTagName("div");
for(i=0;i<divs.length;i++)
{
if(divs[i].id=="div5")
{
document.getElementById(divs[i].id).style.display="block";
}
else
{
document.getElementById(divs[i].id).style.display="none";
}
}
break;
}
}
</script>
</head>
<body>

<div id="div1" style="display:none">Image1</div>
<div id="div2" style="display:none">Image2</div>
<div id="div3" style="display:none">Image3</div>
<div id="div4" style="display:none">Image4</div>
<div id="div5" style="display:none">Image5</div>

<a href="image1" name="image1" onmouseover="ImageSwitch(this.name)" >Image1</a>
<a href="image2" name="image2" onmouseover="ImageSwitch(this.name)" >Image2</a>
<a href="image3" name="image3" onmouseover="ImageSwitch(this.name)" >Image3</a>
<a href="image4" name="image4" onmouseover="ImageSwitch(this.name)" >Image4</a>
<a href="image5" name="image5" onmouseover="ImageSwitch(this.name)" >Image5</a>
</body>
</html>