关键代码:
<script type="text/javascript">
function showMe(index)
{
//book_type_out是类名,类名绑定一种css样式,通过改变类名实现改变css样式,改变css display的属性值。
//book_type_out是标签的当前样式
//book_type 不是标签的当前样式
//book_show 是内容的当前样式
//book_none 不是当前内容的样式
//创建一个数组
var arr = ["history","family","culture","novel"];
//循环数组,初始化所有类名(类名绑定一种css样式),不显示所有的div
for(var i=0;i<arr.length;++i)
{
document.getElementById(arr[i]).className = "book_type";
document.getElementById("book_"+arr[i]).className = "book_none";
}
//显示指定的div。将当前标签修改成当前样式book_type_out
//将当前内容显示出来(通过改变类名实现改变css样式,改变display属性值)
document.getElementById(arr[index]).className = "book_type_out";
document.getElementById("book_"+arr[index]).className = "book_show";
}
</script>
完整代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当当网首页</title>
</head>
<style type="text/css">
body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
}
.book_sort{
border:solid 1px #999;
margin-bottom:10px;
}
.book_new{
background-image:url(images/dd_book_bg.jpg);
background-repeat:repeat-x;
height:25px;
line-height:30px;
clear:both;
}
.book_left{
margin:0px 50px 0px 10px;
color:#882D00;
font-size:14px;
font-weight:bold;
float:left;
}
.book_type{
float:left;
margin-left:3px;
background-image:url(images/dd_book_bg1.jpg);
background-repeat:no-repeat;
width:40px;
height:23px;
margin-top:2px;
text-align:center;
cursor:pointer;
}
.book_type_out{
float:left;
margin-left:3px;
background-image:url(images/dd_book_bg2.jpg);
background-repeat:no-repeat;
width:40px;
height:23px;
margin-top:2px;
text-align:center;
color:#882D00;
font-weight:bold;
cursor:pointer;
}
.book_right{
float:right;
margin-right:5px;
}
.book_class{
clear:both;
margin:0px 5px 0px 5px;
}
#b