您的位置：首页 > Web前端 > JavaScript

JavaScript 实例：当当网首页选项卡切换效果

2017-11-16 19:42 447 查看

关键代码：

<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;
}
#book_history dt,#book_family dt,#book_novel dt,#book_culture dt{
float:left;
width:90px;
text-align:center;
}
#book_history dd,#book_family dd,#book_novel dd,#book_culture dd{
float:left;
width:170px;
margin:0px 0px 5px 0px;
}
.book_none{
display:none;
}
.book_show{
display:block;
}
.book_title{
color:#1965b3;
font-size:14px;
}
.book_publish{
color:#C00;
}

</style>

<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样式)
for(var i=0;i<arr.length;++i)
{
document.getElementById(arr[i]).className = "book_type";
document.getElementById("book_"+arr[i]).className = "book_none";
}
//将当前标签修改成当前样式book_type_out
//将当前内容显示出来(通过改变类名实现改变css样式，改变display属性值)
document.getElementById(arr[index]).className = "book_type_out";
document.getElementById("book_"+arr[index]).className = "book_show";
}
</script>
<body>


<div class="book_sort" style="width:540px; margin:0px auto;" >
<div class="book_new">
<div class="book_left">最新上架</div>

<div class="book_type_out" id="history" onMouseOver="showMe(0)">历史</div>
<div class="book_type" id="family" onMouseOver="showMe(1)">家教</div>
<div class="book_type" id="culture" onMouseOver="showMe(2)">文化</div>
<div class="book_type" id="novel" onMouseOver="showMe(3)">小说</div>
<div class="book_right"><a href="#">更多>></a></div>
</div>
<div class="book_class" style="height:250px;">


<dl id="book_history" class="book_show">
<dt><img src="images/dd_history_1.jpg" alt="history"/></dt>
<dd>《中国时代》（上） 
作者：师永刚，邹明　主编 
出版社：作家出版社 
出版时间：2009年10月 
定价：￥39.00 
当当价：￥27.00 </dd>
<dt><img src="images/dd_history_2.jpg" alt="history"/></dt>
<dd>中国历史的屈辱 
作者：王重旭　著 
出版社：华夏出版社 
出版时间：2009年11月 
定价：￥26.00 
当当价：￥18.20 </dd>
<dt><img src="images/dd_history_3.jpg" alt="history"/></dt>
<dd>《中国时代》（下） 
作者：师永刚，邹明　主编 
出版社：作家出版社 
 出版时间：2009年10月 
定价：￥38.00 
当当价：￥26.30 </dd>
<dt><img src="images/dd_history_4.jpg" alt="history"/></dt>
<dd>大家国学十六讲 
作者：张荫麟，吕思勉著 
出版社：中国友谊出版公司 
出版时间：2009年10月 
定价：￥19.80 
当当价：￥13.70 </dd>
</dl>

<dl id="book_family" class="book_none">
<dt><img src="images/dd_family_1.jpg" alt="history"/></dt>
<dd>嘿，我知道你 
作者：兰海　著 
出版社：中国妇女出版社 
出版时间：2009年10月 
定价：￥28.80 
当当价：￥17.90 </dd>
<dt><img src="images/dd_family_2.jpg" alt="history"/></dt>
<dd>择业要趁早 
作者：（美）列文 
出版社：海天出版社 
出版时间：2009年10月 
定价：￥28.00 
当当价：￥19.30 </dd>
<dt><img src="images/dd_family_3.jpg" alt="history"/></dt>
<dd>爷爷奶奶的“孙子兵法” 
作者：伏建全编著 
出版社：地震出版社 
 出版时间：2009年8月 
定价：￥28.00 
当当价：￥17.40 </dd>
<dt><img src="images/dd_family_4.jpg" alt="history"/></dt>
<dd>1分钟读懂孩子心理 
作者：海韵　著 
出版社：朝华出版社 
出版时间：2009年10月 
定价：￥28.00 
当当价：￥17.40 </dd>
</dl>

<dl id="book_culture" class="book_none">
<dt><img src="images/dd_culture_1.jpg" alt="history"/></dt>
<dd>嘿，我知道你 
作者：兰海　著 
出版社：中国妇女出版社 
出版时间：2009年10月 
定价：￥28.80 
当当价：￥17.90 </dd>
<dt><img src="images/dd_culture_2.jpg" alt="history"/></dt>
<dd>择业要趁早 
作者：（美）列文 
出版社：海天出版社 
出版时间：2009年10月 
定价：￥28.00 
当当价：￥19.30 </dd>
<dt><img src="images/dd_culture_3.jpg" alt="history"/></dt>
<dd>爷爷奶奶的“孙子兵法” 
作者：伏建全编著 
出版社：地震出版社 
 出版时间：2009年8月 
定价：￥28.00 
当当价：￥17.40 </dd>
<dt><img src="images/dd_culture_4.jpg" alt="history"/></dt>
<dd>1分钟读懂孩子心理 
作者：海韵　著 
出版社：朝华出版社 
出版时间：2009年10月 
定价：￥28.00 
当当价：￥17.40 </dd>
</dl>

<dl id="book_novel" class="book_none">
<dt><img src="images/dd_novel_1.jpg" alt="history"/></dt>
<dd>嘿，我知道你 
作者：兰海　著 
出版社：中国妇女出版社 
出版时间：2009年10月 
定价：￥28.80 
当当价：￥17.90 </dd>
<dt><img src="images/dd_novel_2.jpg" alt="history"/></dt>
<dd>择业要趁早 
作者：（美）列文 
出版社：海天出版社 
出版时间：2009年10月 
定价：￥28.00 
当当价：￥19.30 </dd>
<dt><img src="images/dd_novel_3.jpg" alt="history"/></dt>
<dd>爷爷奶奶的“孙子兵法” 
作者：伏建全编著 
出版社：地震出版社 
 出版时间：2009年8月 
定价：￥28.00 
当当价：￥17.40 </dd>
<dt><img src="images/dd_novel_4.jpg" alt="history"/></dt>
<dd>1分钟读懂孩子心理 
作者：海韵　著 
出版社：朝华出版社 
出版时间：2009年10月 
定价：￥28.00 
当当价：￥17.40 </dd>
</dl>
</div>
</div>


</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航

JavaScript 实例：当当网 首页选项卡切换效果

JavaScript 实例：当当网首页选项卡切换效果