zoukankan      html  css  js  c++  java
  • javascript tab onclick

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <title>my_tab</title>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <style>
    ul, li{list-style:none;}
    #tab ul li{float:left;40px;}
    .clearBoth{clear:both;}
    .ok{display:none;}
    .dis{display:block;}
    </style>
    <body>
    <div id="tab">
        <ul>
            <li><a onClick="selectTag('tagContent0', this)" href="javascript:void(0)">1111</a></li>
            <li><a onClick="selectTag('tagContent1', this)" href="javascript:void(0)">222</a></li>
            <li><a onClick="selectTag('tagContent2', this)" href="javascript:void(0)">333</a></li>
        </ul>
        <br class="clearBoth" />
        <div id="tagContent0" class="ok dis">
        xxxxx
        </div>

        <div id="tagContent1" class="ok">
        yyyyyyyyyyy
        </div>

        <div id="tagContent2" class="ok">
        zzzzz
        </div>
    </div>
    <script>
    function selectTag(showContent, selfObj)
    {
        var tag = document.getElementById("tab").getElementsByTagName("li");
        var tagLength = tag.length;
        for(i=0; i<tagLength; i++)
        {
            tag[i].className = "";
        }
        selfObj.parentNode.className = "selectTag";

        for(i=0; j=document.getElementById("tagContent"+i); i++)
        {
            if(i >= tagLength) break;
            j.style.display = "none";
        }
        document.getElementById(showContent).style.display="block";
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    [Agc081F/At2699] Flip and Rectangles
    [CF1216C] White Sheet
    stegsolve使用探究
    栅栏密码
    wireshark常用命令
    某团队线下赛AWD writeup&Beescms_V4.0代码审计
    某线下赛AWD
    BBScan — 一个信息泄漏批量扫描脚本
    ISG2018 web题Writeup
    巅峰极客第二场CTF部分writeup
  • 原文地址:https://www.cnblogs.com/lin3615/p/3590763.html
Copyright © 2011-2022 走看看