选项卡内容容器切换程序

最新推荐文章于 2023-07-12 22:12:41 发布

花果山总钻风

最新推荐文章于 2023-07-12 22:12:41 发布

阅读量458

点赞数

分类专栏： HTML/CSS/JS

本文链接：https://blog.csdn.net/dszgf5717/article/details/46903249

版权

HTML/CSS/JS 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

HTML+CSS+JAVASCRIPT实战详解

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="content-type" content="text/html; charset=gb2312"/>
    <title>美化版选项卡切换块</title>
    <script type="text/javascript">
        function over(x)
        {
            if (x.className != "up") {
            } else {
                x.className = "roll";
            }
        }
        function out(x)
        {
            if (x.className != "roll") {
            } else {
                x.className == "up";
            }
        }
        function my_click(x)
        {
            var grid = x.parentNode.getElementsByTagName("td");
            var ct = document.getElementsByTagName("div");
            var flag = 0
            for(var i = 0; i < grid.length; ++i)
            {
                grid[i].className = "up";
                ct[i].className = "undis";
                if (x != grid[i]) {
                    grid[i].className = "up";
                    ct[i].className = "undis";
                } else {
                    grid[i].className = "down";
                    ct[i].className = "dis";
                }
            }
        }
    </script>
    <style type="text/css">
        body{font-size: 12px;}
        a{display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        text-align: center;
        outline: none;
        color: #333;
        font-weight: bold;}
        a:visited{color: #333;}
        #nav{border: 1px solid #333;border-bottom: none;}
        .down{background: url(tab_img/down.gif) repeat-x;}
        .roll{background: url(tab_img/roll.gif) repeat-x;}
        .roll a:hover{color:#fff}
        .up{background: url(tab_img/up.gif) repeat-x;}
        .up a{color: #fff;}
        .dis{display: block;}
        .undis{display: none;}
        .content{border:1px solid #333;
            border-top:none;
            background: url(tab_img/bottom.gif) repeat-x bottom;}
    </style>
</head>
<body>
    <table width="300" align="center" cellpadding="0" cellspacing="1" id="nav">
        <tr>
            <td width="100" οnmοuseοver="over(this)" οnmοuseοut="out(this)" οnclick="my_click(this)" class="down"><a href="#" hidefocus="true">IT资讯</a> </td>
            <td width="100" οnmοuseοver="over(this)" οnmοuseοut="out(this)" οnclick="my_click(this)" class="up"><a href="#" hidefocus="true">新闻</a> </td>
            <td width="100" οnmοuseοver="over(this)" οnmοuseοut="out(this)" οnclick="my_click(this)" class="up"><a href="#" hidefocus="true">汽车</a> </td>
        </tr>
    </table>
    <div class="dis">
        <table width="300" align="center" height="150" cellpadding="0" cellspacing="0" class="content">
            <tr>
                <td rowspan="3" width="50%" align="center">
                    <img src="tab_img/img_a.gif" border="1"/>
                </td>
                <td>影响互联网未来的趋势</td>
            </tr>
            <tr>
                <td>15年最热门七大技术</td>
            </tr>
            <tr>
                <td>知识产权国家战略今年出台</td>
            </tr>
        </table>
    </div>
    <div class="undis">
        <table width="300" height="150" align="center" cellspacing="0" cellpadding="0" class="content">
            <tr>
                <td rowspan="3" width="50%" align="center">
                    <img src="tab_img/img_b.gif" border="1"/>
                </td>
                <td>年轻的创业者过于急功近利</td>
            </tr>
            <tr>
                <td>14年10大流行语言发布</td>
            </tr>
            <tr>
                <td>琼斯因撒谎背叛入狱</td>
            </tr>
        </table>
    </div>
    <div class="undis">
        <table width="300" height="150" align="center" cellpadding="0" cellspacing="0" class="content">
            <tr>
                <td rowspan="3" width="50%" align="center">
                    <img src="tab_img/img_c.gif" border="1">
                </td>
                <td>全球最便宜车诞生</td>
            </tr>
            <tr>
                <td>车友抢先试雅阁</td>
            </tr>
            <tr>
                <td>中国家用轿车路在何方</td>
            </tr>
        </table>
    </div>
</body>
</html>

花果山总钻风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡内容容器切换程序

HTML+CSS+JAVASCRIPT实战详解美化版选项卡切换块 function over(x) { if (x.className != "up") { } else { x.className = "roll"; }
复制链接

扫一扫

专栏目录