专栏首页菩提树下的杨过js小技巧:tab页切换

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 条评论
登录 后参与评论

相关文章

  • 如何在不影响asp.net默认安全性的前提下使用ckeditor/fckeditor?

    asp.net默认情况下,不允许提交包含html源代码的表单,这在很大程度上防止了跨站(提交)攻击,但是ckeditor/fckeditor之类的富文本编辑器肯...

    菩提树下的杨过
  • jQuery中排除指定元素,同时选择剩下的所有元素

    场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

    菩提树下的杨过
  • silverlight如何在运行时用代码动态控制(或创建)动画

    silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

    菩提树下的杨过
  • 自然语言处理中句子相似度计算的几种方法

    崔庆才
  • 自然语言处理中句子相似度计算的几种方法

    在做自然语言处理的过程中,我们经常会遇到需要找出相似语句的场景,或者找出句子的近似表达,这时候我们就需要把类似的句子归到一起,这里面就涉及到句子相似度计算的问题...

    崔庆才
  • 自然语言处理中句子相似度计算的几种方法

    在做自然语言处理的过程中,我们经常会遇到需要找出相似语句的场景,或者找出句子的近似表达,这时候我们就需要把类似的句子归到一起,这里面就涉及到句子相似度计算的问题...

    崔庆才
  • mysql

    cross join :笛卡尔交集。 Inner join :内连接。 left join :只要满足左边表的需求就可以了,右表有无都可以。 right ...

    wangxl
  • python 学习day3

    1、def关键字,创建函数  2、函数名  3、() 固定搭配  4、函数体  5、返回值

    py3study
  • 使用Apache commons-cli包进行命令行参数解析的示例代码

    1.先定义有哪些参数需要解析、哪些参数有额外的选项、每个参数的描述等等,对应Options类 比如说一个命令行参数是 -hfbv,我们定义的Options的...

    砸漏
  • Centos7上部署FastDFS文件系统与Nginx整合完整教程

    FastDFS是由淘宝的余庆先生所开发,是一个轻量级、高性能的开源分布式文件系统,用纯C语言开发,包括文件存储、文件同步、文件访问(上传、下载)、存取负载均衡、...

    砸漏

扫码关注云+社区

领取腾讯云代金券