网页中,标签随鼠标移动而变化!
想要一种网页效果,像新浪首页上,"体育"和"NBA"两块内容的标签一样,当鼠标在"体育"标签上,则相应内容块中显示"体育"的内容,选到"NBA"则显示"NBA"的内容.应...
想要一种网页效果,像新浪首页上,"体育"和"NBA"两块内容的标签一样,当鼠标在"体育"标签上,则相应内容块中显示"体育"的内容,选到"NBA"则显示"NBA"的内容.
应如何编写?请教各位了,请写的详细些噢! 展开
应如何编写?请教各位了,请写的详细些噢! 展开
2个回答
展开全部
第一种：
<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>
<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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
去用用网站的制造软件
很多都很好用的
我就不讲有哪种的了
会被删
很多都很好用的
我就不讲有哪种的了
会被删
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
