效率最高的标签,没有使用for

<!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:pointer;}

.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:pointer;}

.tabs_title_03{width:3px; height:24px; overflow:hidden; float:left;}

.tabs_content{width:400px;}
</style>
</head>

var tID = "tuijianSongTab_1";

function showTabs( ID ){

if(ID!=tID){

var IDObj = document.getElementById( ID );

var tIDObj = document.getElementById( tID );

var IDObj_content = document.getElementById( ID + "_" );

var tIDObj_content = document.getElementById( tID + "_" );

IDObj.className='tabs_title_02';

tIDObj.className='tabs_title_01';

tIDObj_content.style.display='none';
  	IDObj_content.style.display='';

tID=ID;
  }
}
</SCRIPT>

<div class="tabs">
  <div class="tabs_title">
    <div class="tabs_title_02" id="tuijianSongTab_1" onmouseover ="showTabs( 'tuijianSongTab_1' )">网站电视</div>
	<div class="tabs_title_03"></div>
    <div class="tabs_title_01" id="tuijianSongTab_2" onmouseover ="showTabs( 'tuijianSongTab_2' )">免费电影</div>
	<div class="tabs_title_03"></div>
    <div class="tabs_title_01" id="tuijianSongTab_3" onmouseover ="showTabs( 'tuijianSongTab_3' )">电视剧集</div>
	<div class="tabs_title_03"></div>
    <div class="tabs_title_01" id="tuijianSongTab_4" onmouseover ="showTabs( 'tuijianSongTab_4' )">精彩视频</div>
  </div>
  <div class="tabs_content" id="tuijianSongTab_1_" style="display:block;">网站电视内容</div>
  <div class="tabs_content" id="tuijianSongTab_2_" style="display:none;">免费电影内容</div>
  <div class="tabs_content" id="tuijianSongTab_3_" style="display:none;">电视剧集内容</div>
  <div class="tabs_content" id="tuijianSongTab_4_" style="display:none;">精彩视频内容</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

上面代码是在本论坛看到的，原本不支持 Firefox 的，
也是经本论坛的一位会员“michaelzhouh”提醒，我修改了他的 id .支持 Firefox

原本这是一个简单的代码，我想单独出来跟大家讨论。
之前我也看过一些标签，还有一些说修改过for ，提高了效率，但是上面这个没有用到 for ，
它引入了一个临时变量 tID 来存储保存当前选中的标签。还有id 命名有点技巧。（这个两点都是自我感觉，呵呵）

“效率最高的标签” ，以上就是我说这句话的原因，也可能我是井底之蛙。希望大家指正，评论。

呵呵，不知道为什么自己看到精简灵活的代码。感觉特别好。。呵呵

转自： http://bbs.blueidea.com/thread-2718709-1-38.html

posted @ 2007-05-17 21:19 海浪~~ 阅读(129) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

海浪

效率最高的标签,没有使用for

公告