国开《Dreamweaver网页设计》形考任务八!

HTML 调用js实现多项滑动门选项卡特效。

参考代码

<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”>

//

function g(o) { return document.getElementById(o); }

function hover_zzjs_net(n) {

//如果有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’;}

//如果要做成点击后再转到请将

  • 中的onmouseover 改成 onclick;

    //]]>

    </script>

    </head>

    <body>

    你的代码

    </body>

    </html>

    参考答案

    <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”>

    //

    function g(o) { return document.getElementById(o); }

    function hover_zzjs_net(n) {

    //如果有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’;}

    //如果要做成点击后再转到请将

  • 中的onmouseover 改成 onclick;

    //]]>

    </script>

    </head>

    <body>

    • 一、内容
    • 二、内容
    • 三、内容
    • 四、内容
    • 五、内容
    • 六、内容

    < href=”#”>一、内容,测试内容一!

    < href=”#”>二、内容,测试内容二!

    < href=”#”>三、内容,测试内容三!

    < href=”#”>四、内容,测试内容四!

    < href=”#”>五、内容,测试内容五!

    < href=”#”>六、内容,测试内容六!

    </body>

    </html>

    <>

  • 社交账号快速登录

    微信扫一扫关注
    微信扫一扫关注
    如已关注,请在公众号内回复“登录”二字获取验证码