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

最新推荐文章于 2022-07-09 22:06:46 发布

houyanhua1

最新推荐文章于 2022-07-09 22:06:46 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/78554674

版权

本文介绍了一种使用JavaScript实现类似当当网首页选项卡切换效果的方法，通过关键代码展示如何动态切换内容区域，提升用户体验。

摘要由CSDN通过智能技术生成

关键代码：

<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

最低0.47元/天解锁文章

houyanhua1

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实例：当当网首页选项卡切换效果

关键代码：function showMe(index){ //book_type_out是类名，类名绑定一种css样式，通过改变类名实现改变css样式，改变css display的属性值。 //book_type_out是标签的当前样式 //book_type 不是标签的当前样式 //book_show 是内容的当前样式 //book_none 不是当前内容的样式 //创建一
复制链接

扫一扫