zoukankan      html  css  js  c++  java

  • [CSS+JS]同一页面可以重复使用的选项卡收藏

    <!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>


    <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
    <title>选项卡</title>
    <style type="text/css">
    <!--
    /* 初始化 */
    body     {
    font    : 12px/1 "宋体", SimSun, serif;
    background    :#fff;
    color    :#000;
    }
    ul,
    li,
    dl,
    dt,
    dd     {
    margin    :0;
    padding    :0;  /* 清除浏览器默认的margin和padding值 */
    }
    ul,
    li     {
    list-style    :none outside;  /* 清除浏览器中列表项默认的占位 */
    }
    a     {
    text-decoration    :none;
    }
    img     {
    border    :0;
    }
    /* 选项卡整体外观定义 */
    .tabList     {
    width    :400px;
    height    :160px;
    overflow    :hidden;
    }
    .tabList .tabBox     {
    height    :100%;
    position    :relative;
    background    :#09c;
    }
    .tabList .tabBox li     {
    float    :left;
    width    :25%;
    text-align    :center;
    }
    .tabList h4     {
    margin    :0;
    height    :26px;
    font-size    :1em;
    line-height    :22px;
    }
    .tabList h4 a     {
    color    :#039;
    font-weight    :normal;
    display    :block;
    background    :#bfeafd url(img/tabList_btn.png) no-repeat;
    padding-left    :5px;
    }
    .tabList h4 a span     {
    display    :block;
    background    :url(img/tabList_btn.png) no-repeat top right;
    padding-right    :5px;
    }
    .tabList h4 a:hover,
    .tabList .tabOn h4 a    {
    background-position    :0 -50px;
    }     
    .tabList h4 a:hover span,
    .tabList .tabOn h4 a span     {
    background-position    :right -50px;
    }
    .tabList .tabContentBox li    {
    width    :auto;
    margin-top    :0;
    }
    .tabList .tabContentBox     {
    width    :390px;
    height    :130px;
    border    :1px solid #069;
    text-align    :left;
    overflow    :hidden;
    background    :#fff;
    position    :absolute;
    top    :22px;
    left    :0;
    display    :none;
    margin    :4px;
    }
    .tabList li:hover .tabContentBox,
    .tabList .tabOn .tabContentBox     {
    display    :block;
    }
    /* 以下是对各项内容的CSS定义 */
    .tabList .tabContentBox .blog,
    .tabList .tabContentBox .group     {
    color    :#999;
    line-height    :2em;
    margin    :5px;
    }
    .tabList .tabContentBox .blog dt,
    .tabList .tabContentBox .group dt,
    .tabList .tabContentBox .blog dd,
    .tabList .tabContentBox .group dd    {
    float    :left;
    border-bottom    : 1px dotted #9cf;
    }
    .tabList .tabContentBox .blog dt,
    .tabList .tabContentBox .group dt     {
    width    :60%;
    white-space    :nowrap;
    overflow    :hidden;
    clear    :left;
    font-size    :1.1em;
    }
    .tabList .tabContentBox .blog dt a,
    .tabList .tabContentBox .group dt a     {
    color    :#039;
    display    :block;
    margin-left    :5px;
    padding-left    :12px;
    background    : url(img/tabList_icon1.png) no-repeat 5px 11px;
    }
    .tabList .tabContentBox .blog dt a:hover,
    .tabList .tabContentBox .group dt a:hover     {
    color    :#f90;
    background-position    :5px -19px;
    }
    .tabList .tabContentBox .blog dd,
    .tabList .tabContentBox .group dd     {
    color    :#0cf;
    width    :20%;
    float    :left;
    white-space    :nowrap;
    overflow    :hidden;
    }
    .tabList .tabContentBox .blog dd a,
    .tabList .tabContentBox .group dd a     {
    color    :#069;
    }
    .tabList .tabContentBox .blog dd a:hover,
    .tabList .tabContentBox .group dd a:hover     {
    color    :#f90;
    }
    .tabList .tabContentBox .album li,
    .tabList .tabContentBox .share li    {
    width    :24.9%;
    float    :left;
    padding-top    :15px;
    text-align    :center;
    }
    -->
    </style>
    <script type="text/javascript" language="javascript">
    <!--
    window.onload     = tabEffect;
    function tabEffect()
    {
            var allElements = document.getElementsByTagName('*');
            for (var i=0; i<allElements.length; i++)
            {
                if (allElements[i].className.indexOf('tabOption') >= 0)
                {
                allElements[i].onmouseover     = mouseOver;
            }
        }
    }
    function mouseOver()
    {
        tabList     = this.parentNode;
        tabOptions     = tabList.getElementsByTagName("li");
            for (var i=0; i<tabOptions.length; i++)
            {
                if (tabOptions[i].className.indexOf('tabOption') >= 0)
                {
                tabOptions[i].className     = "tabOption";
            }
        }
            this.className += " tabOn";
    }
    -->
    </script>
    </head><body>
    <div class="tabList" id="tabList1">
          <ul class="tabBox">
            <li class="tabOption tabOn"><h4><a href="http://www.ddcat.net/blog/" title="单击，跳转到所有[日志]列表"><span>日志</span></a></h4>
              <div class="tabContentBox">
              <dl class="tabContent blog">
                <dt><a href="http://www.ddcat.net/1" title="日志标题：优秀广告设计，不服不行！">优秀广告设计，不服不行！</a></dt>
                <dd class="name"><a href="#11" title="作者：QUESTER">QUESTER</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/2" title="日志标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
                <dd class="name"><a href="#11" title="作者：snl">snl</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/3" title="日志标题：网站内容结构化探讨">网站内容结构化探讨</a></dt>
                <dd class="name"><a href="#11" title="作者：豆猫">豆猫</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/4" title="日志标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt>
                <dd class="name"><a href="#11" title="作者：greengnn">greengnn</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/5" title="日志标题：某些人眼中的色彩">某些人眼中的色彩</a></dt>
                <dd class="name"><a href="#11" title="作者：amethyst01">amethyst01</a></dd>
                <dd>2009-01-10</dd>
              </dl>
              </div> 
            </li>
            <li class="tabOption"><h4><a href="http://www.ddcat.net/album/" title="单击，跳转到所有[相册]列表"><span>相册</span></a></h4>
              <div class="tabContentBox">
              <ul class="tabContent album">
                <li><a href="http://www.ddcat.net/img1" title="查看相册内容"><img src="tab_files/cover.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
                <li><a href="http://www.ddcat.net/img1" title="查看相册内容"><img src="tab_files/cover.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
                <li><a href="http://www.ddcat.net/img1" title="查看相册内容"><img src="tab_files/cover.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
                <li><a href="http://www.ddcat.net/img1" title="查看相册内容"><img src="tab_files/cover.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>      </ul>
              </div>
            </li>
            <li class="tabOption"><h4><a href="http://www.ddcat.net/share/" title="单击，跳转到所有[分享]列表"><span>分享</span></a></h4>
              <div class="tabContentBox">
              <ul class="tabContent share">
                <li><a href="http://www.ddcat.net/img2" title="查看内容"><img src="tab_files/photo.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
                <li><a href="http://www.ddcat.net/img2" title="查看内容"><img src="tab_files/photo.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
                <li><a href="http://www.ddcat.net/img2" title="查看内容"><img src="tab_files/photo.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
                <li><a href="http://www.ddcat.net/img2" title="查看内容"><img src="tab_files/photo.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
              </ul>
              </div>
            </li>
            <li class="tabOption"><h4><a href="http://www.ddcat.net/group/" title="单击，跳转到所有[群组]列表"><span>群组</span></a></h4>
              <div class="tabContentBox">
              <dl class="tabContent group">
                <dt><a href="http://www.ddcat.net/1" title="标题：优秀广告设计，不服不行！">优秀广告设计，不服不行！</a></dt>
                <dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/2" title="标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
                <dd class="name"><a href="#11" title="群组：手绘爱好者">手绘爱好者</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/3" title="标题：网站内容结构化探讨">网站内容结构化探讨</a></dt>
                <dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/4" title="标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt>
                <dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd>
                <dd>2009-01-10</dd>
                <dt><a href="http://www.ddcat.net/5" title="标题：某些人眼中的色彩">某些人眼中的色彩</a></dt>
                <dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd>
                <dd>2009-01-10</dd>
              </dl>
              </div>
            </li>
          </ul>
    </div>
    </body></html>



    选项卡
  • 相关阅读:
    faster rcnn学习（三）
    too many values to unpack (expected 2)
    RuntimeWarning: overflow encountered in ubyte_scalars
    C#中excel读取和写入
    C#中使用Sql对Excel条件查询
    IIS上部署MVC网站，打开后ExtensionlessUrlHandler-Integrated-4.0解决方法IIS上部署MVC网站，打开后500错误
    C#微信公众平台账号开发，从零到整，步骤详细。
    VS快捷键大全
    ASP.NET将文件写到另一服务器
    开放api接口签名验证
  • 原文地址：https://www.cnblogs.com/cutepig/p/1410001.html
Copyright © 2011-2022 走看看