本文介绍了一种使用JavaScript实现的网页标签切换效果，通过简单的HTML结构配合JavaScript代码，可以轻松地为网页添加交互性的标签切换功能，使得用户能够方便地在不同的内容区块之间进行切换。
<script type="text/javascript">
</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS01</title>
<style type="text/css">
body{font-size:12px; text-align:center; line-height:18px;}
.tabs{width:400px; margin:auto;}
.tabs_title{width:400px; height:24px; border-bottom:#788 solid 3px;}
.tabs_title_01{width:76px; height:18px; padding-top:6px; float:left; background:url(http://www.singercn.net/my/js01/bg_01.gif) no-repeat; cursor:hand;}
.tabs_title_02{width:76px; height:18px; padding-top:6px; float:left; background:url(http://www.singercn.net/my/js01/bg_02.gif) no-repeat; cursor:hand;}
.tabs_title_03{width:3px; height:24px; overflow:hidden; float:left;}
.tabs_content{width:400px;}
</style>
</head>
<body>
<SCRIPT language=JavaScript>
var tID=0;
function showTabs(ID){
if(ID!=tID){
TabTitle[tID].className='tabs_title_01';
TabTitle[ID].className='tabs_title_02';
TabContent[tID].style.display='none';
TabContent[ID].style.display='';
tID=ID;
}
}
</SCRIPT>
<div class="tabs">
<div class="tabs_title">
<div class="tabs_title_02" id="TabTitle" οnclick="showTabs(0)">网站电视</div>
<div class="tabs_title_03"></div>
<div class="tabs_title_01" id="TabTitle" οnclick="showTabs(1)">免费电影</div>
<div class="tabs_title_03"></div>
<div class="tabs_title_01" id="TabTitle" οnclick="showTabs(2)">电视剧集</div>
<div class="tabs_title_03"></div>
<div class="tabs_title_01" id="TabTitle" οnclick="showTabs(3)">精彩视频</div>
</div>
<div class="tabs_content" id="TabContent" style="display:block;">网站电视内容</div>
<div class="tabs_content" id="TabContent" style="display:none;">免费电影内容</div>
<div class="tabs_content" id="TabContent" style="display:none;">电视剧集内容</div>
<div class="tabs_content" id="TabContent" style="display:none;">精彩视频内容</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
