HTML 调用js实现多项滑动门选项卡特效。
参考代码
<!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> js实现多项滑动门选项卡特效</title>
<style media=”screen” type=”text/css”>
</style>
<script type=”text/javascript” language=”javascript”>
//<!CDATA[
function g(o) { return document.getElementById(o); }
function hover_zzjs_net {
//如果有N个标签,就将i<=N;
for (var i = 1; i <= 6; i++) { g(‘tab_zzjs_’ + i).className = ‘nor_zzjs’; g(‘tab_zzjs_0’ + i).className = ‘undis_zzjs_net’; } g(‘tab_zzjs_0’ + n).className = ‘dis_zzjs_net’; g(‘tab_zzjs_’ + n).className = ‘hovertab_zzjs’;}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
你的代码
</body>
</html>
参考答案
<!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> js实现多项滑动门选项卡特效</title>
<style media=”screen” type=”text/css”>
</style>
<script type=”text/javascript” language=”javascript”>
//<!CDATA[
function g(o) { return document.getElementById(o); }
function hover_zzjs_net {
//如果有N个标签,就将i<=N;
for (var i = 1; i <= 6; i++) { g(‘tab_zzjs_’ + i).className = ‘nor_zzjs’; g(‘tab_zzjs_0’ + i).className = ‘undis_zzjs_net’; } g(‘tab_zzjs_0’ + n).className = ‘dis_zzjs_net’; g(‘tab_zzjs_’ + n).className = ‘hovertab_zzjs’;}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class=”936_zzjs_net”>
<div id=”tab_zzjs_” class=”tab_zzjs_”>
<ul>
<li id=”tab_zzjs_1″ class=”hovertab_zzjs” onmouseover=”x:hover_zzjs_net(1);”>一、内容</li>
<li id=”tab_zzjs_2″ class=”nor_zzjs” onmouseover=”i:hover_zzjs_net(2);”>二、内容</li>
<li id=”tab_zzjs_3″ class=”nor_zzjs” onmouseover=”a:hover_zzjs_net(3);”>三、内容</li>
<li id=”tab_zzjs_4″ class=”nor_zzjs” onmouseover=”o:hover_zzjs_net(4);”>四、内容</li>
<li id=”tab_zzjs_5″ class=”nor_zzjs” onmouseover=”g:hover_zzjs_net(5);”>五、内容</li>
<li id=”tab_zzjs_6″ class=”nor_zzjs” onmouseover=”z:hover_zzjs_net(6);”>六、内容</li>
</ul>
</div>
<div class=”ctt_zzjs_net”>
<div class=”dis_zzjs_net” id=”tab_zzjs_01″>< href=”#”>一、内容</a>，测试内容一！</div>
<div class=”undis_zzjs_net” id=”tab_zzjs_02″>< href=”#”>二、内容</a>，测试内容二！</div>
<div class=”undis_zzjs_net” id=”tab_zzjs_03″>< href=”#”>三、内容</a>，测试内容三！</div>
<div class=”undis_zzjs_net” id=”tab_zzjs_04″>< href=”#”>四、内容</a>，测试内容四！</div>
<div class=”undis_zzjs_net” id=”tab_zzjs_05″>< href=”#”>五、内容</a>，测试内容五！</div>
<div class=”undis_zzjs_net” id=”tab_zzjs_06″>< href=”#”>六、内容</a>，测试内容六！</div>
</div>
</div>
</div>
</body>
</html>
