js小技巧:tab页切换

依旧只是贴在这里备份,方便以后粘贴复制,高手绕过,以免浪费时间:)

<!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>
    <title>tab页切换</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        function switchTab(ProTag, ProBox) {
            for (i = 1; i < 5; i++) {
                if ("tab" + i == ProTag) {
                    document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on";
                } else {
                    document.getElementById("tab" + i).getElementsByTagName("a")[0].className = "";
                }
                if ("con" + i == ProBox) {
                    document.getElementById(ProBox).style.display = "";
                } else {
                    document.getElementById("con" + i).style.display = "none";
                }
            }
        }
    </script>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
            line-height: 25px;
            font-size: 12px;
            list-style:none;
        }
        #tabContainer
        {
            margin: 30px;
        }
        #tabContainer li
        {
            float: left;
            width: 80px;
            margin: 0 3px;
            background: #efefef;
            text-align: center;
        }
        #tabContainer a
        {
            display: block;
        }
        #tabContainer a.on
        {
            background: pink;
        }
    </style>
</head>
<body>
    <div id="tabContainer">
        <ul>
            <li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1');this.blur();return false;">
                命运</a></li>
            <li id="tab2"><a href="#" onclick="switchTab('tab2','con2');this.blur();return false;">
                运势</a></li>
            <li id="tab3"><a href="#" onclick="switchTab('tab3','con3');this.blur();return false;">
                缘分</a></li>
            <li id="tab4"><a href="#" onclick="switchTab('tab4','con4');this.blur();return false;">
                人生</a></li>
        </ul>
        <div style="clear: both">
        </div>
        <div id="con1">
            命运是个神马玩意儿...
        </div>
        <div id="con2" style="display: none">
            霉运也是一种运气...
        </div>
        <div id="con3" style="display: none">
            缘份纯粹是蒙人的东西...
        </div>
        <div id="con4" style="display: none">
            人生就是人"生"出来之后的过程...
        </div>
    </div>
</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>
    <title>tab页切换</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        function switchTab(ProTag, ProBox) {
            for (i = 1; i < 5; i++) {
                if ("tab" + i == ProTag) {
                    document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on";
                } else {
                    document.getElementById("tab" + i).getElementsByTagName("a")[0].className = "";
                }
                if ("con" + i == ProBox) {
                    document.getElementById(ProBox).style.display = "";
                } else {
                    document.getElementById("con" + i).style.display = "none";
                }
            }
        }
    </script>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
            line-height: 25px;
            font-size: 12px;
            list-style:none
        }
        #tabContainer
        {
            margin: 30px;
        }
        #tabContainer li
        {
            float: left;
            width: 80px;
            margin: 0 3px;
            background: #efefef;
            text-align: center;
        }
        #tabContainer a
        {
            display: block;
        }
        #tabContainer a.on
        {
            background: pink;
        }
    </style>
</head>
<body>
    <div id="tabContainer">
        <ul>
            <li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1');this.blur();return false;">
                命运</a></li>
            <li id="tab2"><a href="#" onclick="switchTab('tab2','con2');this.blur();return false;">
                运势</a></li>
            <li id="tab3"><a href="#" onclick="switchTab('tab3','con3');this.blur();return false;">
                缘分</a></li>
            <li id="tab4"><a href="#" onclick="switchTab('tab4','con4');this.blur();return false;">
                人生</a></li>
        </ul>
        <div style="clear: both">
        </div>
        <div id="con1">
            命运是个神马玩意儿...
        </div>
        <div id="con2" style="display: none">
            霉运也是一种运气...
        </div>
        <div id="con3" style="display: none">
            缘份纯粹是蒙人的东西...
        </div>
        <div id="con4" style="display: none">
            人生就是人"生"出来之后的过程...
        </div>
    </div>
</body>
</html>

运行代码 (注:如果点击运行代码后报js错误,请在页面上右击选择编码为utf-8或刷新页面)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

他构想了一个族谱小程序,就等程序员来实现了!

本文讲述的是一款解决人们想熟悉亲戚及亲戚之间关系需求的小程序,其主要的使用场景会围绕着微信的亲戚家族群组。

10420
来自专栏机器人网

教你DIY一个撩妹装X神器——仿生金刚狼爪

当初金刚狼电影刚上映的时候,大街上就开始卖各种塑料的、绑在手上的狼爪玩具,不过这些玩具通常廉价,狼爪不能伸缩,可以伸缩的也大多需求手动开关,这就大大降低的玩具的...

42450
来自专栏SAP最佳业务实践

SAP最佳业务实践:FI–资产会计(162)-25相关冲销

5 附录 5.1 流程步骤的冲销 在如下章节中,可以找到最常见的冲销步骤,用来冲销本文档中描述的某些活动。 在建工程结算事务代码 (SAP GUI)AIAB冲销...

54950
来自专栏静晴轩

Sublime Text 最新注册码分享

SublimeText,她作为强大而小巧,性感且快捷的编辑器,长时间以来,受众人青睐;对于个人来说,也是最常用代码编辑器,且没有之一(目前同时也会用 VsCod...

40030
来自专栏嵌入式程序猿

博世小功率变频器拆解

变频器在工业生产中应用非常的广泛,橡胶行业的轮胎产线就有很多,而且轮胎产线环境恶劣,灰尘大,今天帮朋友修理一台力士乐的变频器,因为长期使用加上环境恶劣,变频器里...

56520
来自专栏龙行天下CSIEM

科学瞎想系列之五十二 电流传感器(2)

上期讲了电流互感器,本期说说分流器。上期讲了,电流互感器不适用于直流、瞬态以及各种非正弦交流电流的检测,那么这种情况应该怎么办呢?分流器就是一种不错的选...

28950
来自专栏知晓程序

海量高清二次元壁纸!快来把老婆抱回家吧

今天,知晓程序(微信号 zxcx0101)要给广大动漫迷们,推荐一款名叫「Soda 壁纸」小程序,导航用的是颜文字,图库里全是高清壁纸,十分带感。

11920
来自专栏信安之路

CTF初识与深入

这段时间一直在忙活CTF相关的东西,从参赛者到出题人,刷过一些题,也初步了解了出题人的逻辑;这篇文章就简单地讲一下CTF如何入门以及如何深入的学习、利用CTF这...

22600
来自专栏企鹅号快讯

Brocade为何认为FC是NVMe over Fabric中最好的Fabric?

Brocade最近发表了对NVMe over Fabric理解和观点,认为FC Fabric相比以太网具有很多优势,并且FC聚焦数据中心数据传输和交换,具有更好...

29590
来自专栏FreeBuf

极客DIY:教你做一个简单的“太阳能”移动电源

在这篇分享中,我将向大家一步一步的展示如何手工制作一个简单的太阳能移动电源。同时因为我个人的喜好,漂亮且艺术感十足的木质外在的制作过程也会包含其中。 类似的分享...

21990

扫码关注云+社区

领取腾讯云代金券