网页中,标签随鼠标移动而变化!

想要一种网页效果,像新浪首页上,"体育"和"NBA"两块内容的标签一样,当鼠标在"体育"标签上,则相应内容块中显示"体育"的内容,选到"NBA"则显示"NBA"的内容.应... 想要一种网页效果,像新浪首页上,"体育"和"NBA"两块内容的标签一样,当鼠标在"体育"标签上,则相应内容块中显示"体育"的内容,选到"NBA"则显示"NBA"的内容.

应如何编写?请教各位了,请写的详细些噢! 展开

 我来答

2个回答

#热议# 不吃早饭真的会得胆结石吗？

lb999999999
推荐于2016-01-17 · TA获得超过611个赞

知道小有建树答主

回答量：1165

采纳率：0%

帮助的人：797万

我也去答题访问个人页

关注

展开全部

第一种：

<html>
<head>
<title>光标移到换标签↑↓</title>
<script language="JavaScript">
//当前项加重显示
function csszl1(cs)
 {
 for (var i=0;i<3;i++)
 {
  //eval("ie5menu"+i+".className='menu1';");
  eval("tab1_"+i+".className='menu3';");
  eval("submenutab1_" + i + ".style.display=\"none\";");

  eval("tab1_"+i+".className='menu2';");
  eval("submenutab1_" + i + ".style.display=\"none\";");
 }
 eval(cs+".className='menu1';");
 eval("submenu" + cs + ".style.display=\"block\";");
}

function onover(obj)
{
 obj.className="tdOnOver";
}
</SCRIPT>
</head>
<style type="text/css">
<!--
.tdonover{
 background-color:#F78D37;
 color:#fff;
 font-family:"宋体";
 font-size:14px;
}
-->
</style>
<body>
<table style="BORDER-RIGHT: #a3a3a3 1px solid; BORDER-LEFT: #a3a3a3 1px solid; BORDER-BOTTOM: #a3a3a3 

1px solid" height=23 cellSpacing=0 cellPadding=0 width=276 border=0>
         
    <tr BGCOLOR="#F7FBFF">
     <td align="center" BGCOLOR="#F7FBFF">
<table width=278 height=35 border=1 cellPadding=0 cellSpacing=0 bordercolor="#00CCFF">
     <tr>
 
          <td width=90 align=middle class=menu1 id=tab1_0 onmouseover="csszl1(this.id);onover(this)">
   第一类</td>
 
          <td width=89 align=middle class=menu2 id=tab1_1 onmouseover="csszl1(this.id);onover(this)">
   第二类</td>
          <td width=99 align=middle class=menu3 id=tab1_2 onmouseover="csszl1(this.id);onover(this)">
   第三类</td>
 
 </tr>
</table>  </td>
       </tr>

    <tr id=submenutab1_0 style="DISPLAY:bolck" BGCOLOR="#F7FBFF">
     <td height="300" align="center" BGCOLOR="#F7FBFF"><span class="STYLE1">111</span></td>
       </tr>
 
    <tr id=submenutab1_1 style="DISPLAY:none" BGCOLOR="#F7FBFF">
     <td align=center width=370 height=300>222</td> 
    </tr>
  
    <tr id=submenutab1_2 style="DISPLAY:none" BGCOLOR="#F7FBFF">
     <td align=center width=370 height=300>333</td> 
    </tr>
</table>
</body>
</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=gb2312" /> 
<title>无标题文档</title> 

<style type="text/css"> 
<!-- 
.Menu { 
font-size: 12px; 
width: 200px; 
float: left; 
border: 1px solid #CCCCCC; 
} 
ul { 
margin: 0px; 
padding: 0px; 
} 
.Menu ul li { 
list-style-type: none; 
height: 24px; 
text-align: center; 
line-height: 24px; 
} 
.Menu li a, .Menu li a:active { 
border-bottom:1px solid #cccccc; 
display: block; 
height: 24px; 
width: 200px; 
text-decoration: none; 
} 
.Menu li a:hover { 
background-color: #f2f6fb; 
} 
.content .textList li { 
list-style-type: none; 
} 
.content { 
width: 500px; 
margin-left: 210px; 
} 
.content .textList { 
border: 1px solid #CCCCCC; 
height: 500px; 
} 
--> 
</style> 
</head> 

<body> 
<script type="text/javascript"> 
<!-- 
function swap_tab(n){ 
for(var i=1;i<=4;i++){ 
var curC=document.getElementById("tab_"+i); 
var curB=document.getElementById("tab_t"+i); 
if(n==i){ 
curC.style.display="block"; 
}else{ 
curC.style.display="none"; 
} 
} 
} 
//--> 
</script> 
<div class="Menu" > 
<ul> 
<li onmouseover="return swap_tab(1)" id="tab_t1"> 
<a href="#">栏目导航1</a> 
</li> 
<li onmouseover="return swap_tab(2)" id="tab_t2"> 
<a href="#">栏目导航2</a> 
</li> 
<li onmouseover="return swap_tab(3)" id="tab_t3"> 
<a href="#">栏目导航3</a> 
</li> 
<li onmouseover="return swap_tab(4)" id="tab_t4"> 
<a href="#">栏目导航4</a> 
</li> 
</ul> 
</div> 
<div class="content"> 
<div id="tab_1"> 
<div class="textList"> 
<ul> 
<li>栏目内容1</li> 
</ul> 
</div> 
</div> 
<div id="tab_2" style="display: none;"> 
<div class="textList"> 
<ul> 
<li>栏目内容2</li> 
</ul> 
</div> 
</div> 
<div id="tab_3" style="display: none;"> 
<div class="textList"> 
<ul> 
<li>栏目内容3</li> 
</ul> 
</div> 
</div> 
<div id="tab_4" style="display: none;"> 
<div class="textList"> 
<ul> 
<li>栏目内容4</li> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

s880050
2008-08-27 · TA获得超过187个赞

知道答主

回答量：114

采纳率：0%

帮助的人：62.3万

我也去答题访问个人页

关注

展开全部

去用用网站的制造软件
很多都很好用的
我就不讲有哪种的了
会被删

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

网页中,标签随鼠标移动而变化!

其他类似问题

为你推荐：