许多网页当鼠标在不同的区域移动时，一个div中会显示相应的内容，并且会对鼠标悬停的文字进行高亮处理，类似操作还有许多，可以按照实际需求进行小小的修改。
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.book .title{
height: 30px;
}
.book .title div{
float: left;
width: 80px;
height: 50px;
cursor: pointer;
}
.content div{
width: 300px;
height: 300px;
}
#ls{
background-color: blue;
}
#jj{
background-color: yellow;
}
#wh{
background-color: green;
}
#xs{
background-color: gray;
}
.content_block{
display: block;
}
.content_none{
display: none;
}
</style>
</head>
<body>
<div class="book">
<div class="title">
<div onmouseover="bookMove('ls',this)">历史</div>
<div onmouseover="bookMove('jj',this)">家教</div>
<div onmouseover="bookMove('wh',this)">文化</div>
<div onmouseover="bookMove('xs',this)">小说</div>
</div>
<div class="content">
<div id="ls" class="content_block"></div>
<div id="jj" class="content_none"></div>
<div id="wh" class="content_none"></div>
<div id="xs" class="content_none"></div>
</div>
</div>
</body>
<script type="text/javascript">
var book_id=["ls","jj","wh","xs"];
function bookMove(data,that){
var title=document.getElementsByClassName("title")[0].getElementsByTagName("div");
for(var i=0;i<4;i++){
title[i].style="color:black";
}
that.style="color:red;";
for(var i=0;i<4;i++){
if(book_id[i]==data){
document.getElementById(book_id[i]).className="content_block";
}else{
document.getElementById(book_id[i]).className="content_none";
}
}
document.getElementById(data).className="content_block";
}
</script>
</html>