关于HTML 同页面鼠标经过不同标题切换不同内容

小弟是自学HTML的初学者被困到这一步了想设计一个页面有个功能无法实现，具体就是同页面鼠标经过不同标题切换不同内容例如标题010203当鼠标经过01的时候出来属于01的内... 小弟是自学HTML的初学者被困到这一步了想设计一个页面

有个功能无法实现，具体就是同页面鼠标经过不同标题切换不同内容

例如标题01 02 03 当鼠标经过01的时候出来属于01的内容.
当鼠标经过02的时候出来属于02的内容。
当鼠标经过03的时候出来属于03的内容.
在同页面不跳转的情况下实现。

我只知道可以用JS onMoseover 实现，
但具体不知道从何下手希望高手们有时间帮我写个最简单的代码
在下感谢感谢财富不多希望乐于帮助的高手居多
不用框架来转换同页面内容
例如<div id="left">
<ul>
<li><a href="javascript:(省略) onmouseover="(省略)"> 01 </a></li>
<li><a href="javascript:(省略) onmouseover="(省略)"> 0 2</a></li>
</ul>
</div>
<div id="right1">
我是第一个内容
</div>
<div id="right2">
我是第二个内容
</div>

请高手补完 JS代码和相对鼠标的事件展开

 我来答

1个回答

#合辑# 面试问优缺点怎么回答最加分？

百度网友e727050
2010-06-24 · TA获得超过217个赞

知道小有建树答主

回答量：173

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

水平有限下面的代码写的可能有点复杂用JQuery写可以简单不少

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>不同标题切换不同内容</title>

<style type="text/css">
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
</style>
<script type="text/javascript">
function showdiv(s){
if(s=="1"){
document.getElementById("content1").className="contentin contentfirst";//显示标题1的内容下面代码类似不在添加注释
document.getElementById("content2").className="contentfirst";//隐藏标题2的内容下面代码类似不在添加注释
document.getElementById("content3").className="contentfirst";//隐藏标题3的内容下面代码类似不在添加注释

document.getElementById("li2").className=null;//使标题2与正文内容相离下面代码类似不在添加注释
document.getElementById("li1").className="tabin";//使标题一与正文内容相连接下面代码类似不在添加注释
document.getElementById("li3").className=null;//使标题3与正文内容相离下面代码类似不在添加注释

}else if(s=="2"){
document.getElementById("content1").className="contentfirst";
document.getElementById("content2").className="contentin contentfirst";
document.getElementById("content3").className="contentfirst";

document.getElementById("li1").className=null;
document.getElementById("li2").className="tabin";
document.getElementById("li3").className=null;
}else{
document.getElementById("content1").className="contentfirst";
document.getElementById("content3").className="contentin contentfirst";
document.getElementById("content2").className="contentfirst";

document.getElementById("li1").className=null
document.getElementById("li3").className="tabin";
document.getElementById("li2").className=null
}
}
</script>
</head>
<body>
<ul id="tabfirst">
<li class='tabin' id="li1" > <a href="#" onMouseOver="showdiv('1')"> 01 </a></li>
<li id="li2"> <a href="#" onMouseOver="showdiv('2')"> 02 </a></li>
<li id="li3"> <a href="#" onMouseOver="showdiv('3')"> 03 </a></li>
</ul>
<div class="contentin contentfirst" id="content1">我是第一个内容</div>
<div class="contentfirst" id="content2">我是第二个内容</div>
<div class="contentfirst" id="content3">我是第三个内容</div>

</body>
</html>

已赞过 已踩过<

评论收起

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

关于HTML 同页面鼠标经过不同标题切换不同内容

其他类似问题

为你推荐：