zoukankan      html  css  js  c++  java
  • 利用JavaScript制作网页中“选项卡”效果。

    “选项卡”是Windows中的一项非常常用技术应用,但随着Web技术的发展,一些网页中也开始有了类似的技术应用,比如你看到的一些搜索型的门户站点等,都会有这样的应用,在网页中使用这项技术,可以节省很多页面中的空间,而更主要的是能够使网页更加新颖、美观。

       您可以在互联网上搜索一下要达到此效果的代码,会有很多,但是你会发现,好像实现起来很复杂,代码量很大。其实,这主要是由于,在过去,Web标准不是很统一,各浏览器厂商也没有相对固定统一的标准。换句话说,代码量大,绝大部分都是一些浏览器版本的判断代码,而真正要实现此效果的代码却没有几行。

    <html>
    <head>
    <title>block show sample</title>
    <style type="text/css">
    <!--
      #t1
    {
        width
    : 40%;
        height
    : 40%;
        background-color
    :#d2ddd2;
    }

      #t2
    {
        width
    : 40%;
        height
    : 40%;
        background-color
    :#ddd2d2;
        display
    : none;
    }

    -->
    </style>
    <script language=javascript>
    <!--
      
    function show(objID)
      
    {
        
    var obj = document.all ? document.all[objID] : document.getElementById(objID);
        obj.style.display 
    = 'block';
      }


      
    function hide(objID)
      
    {
        
    var obj = document.all ? document.all[objID] : document.getElementById(objID);
        obj.style.display 
    = 'none';
      }

    //-->
    </script>
    </head>
    <body>
    <p>
    &nbsp;&nbsp; <href="#" onclick="Javacript: show('t1'); hide('t2')">table 1</a>
    &nbsp;&nbsp; <href="#" onclick="Javacript: show('t2'); hide('t1')">table 2</a>
    </p>
    <table id=t1 border=1 >
      
    <tr>
        
    <td>table 1</td>
      
    </tr>
    </table>
    <table id=t2 border=1>
      
    <tr>
        
    <td>table 2</td>
      
    </tr>
    </table>
    </body>
    </html>

     其实,说到最后,实现此效果的代码只有那两个function而已。
       简单吧,赶快加到你自己的网页中去吧!

  • 相关阅读:
    bzoj 3572 [Hnoi2014]世界树 (虚树+树形dp)
    2018 计算之道初赛第二场 阿里巴巴的手机代理商(困难)(反向可持久化Trie)
    hdu 3089 (快速约瑟夫环)
    Codeforces Round #479 (Div. 3)
    牛客练习赛17
    BNU校赛总决赛J 小白兔小灰兔 相交计算几何模板
    2018BNU校赛总决赛
    Educational Codeforces Round 43 (Rated for Div. 2) ABCDE
    Codeforces Round #478 (Div. 2) ABCDE
    牛客练习赛 16
  • 原文地址:https://www.cnblogs.com/publicbill/p/296765.html
Copyright © 2011-2022 走看看