zoukankan      html  css  js  c++  java
  • 选项卡

    做项目的时候 要用到选项卡 但是突然忘记怎么做了 笔记也丢了 学了另一种方法 现在找回了 两种方法都在这里记一下 以免 再次丢失

    第一种 笔记里的方法:

    <!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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #fenlei{ 500px; height:35px;}
    .xiang{ float:left; 100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}
    .xiang:hover{ cursor:pointer}
    .xuanxiang{ 500px; height:300px; display:none}
    #guonei{ background-color:#AAAAFF; display:block}
    #guoji{ background-color:#4DFFFF;}
    #tiyu{ background-color:#d3a4ff;}
    #yule{ background-color:#FFFFB9;}
    </style>
    </head>
    
    <body>
    
    <br />
    <div id="fenlei">
        <div class="xiang" style="background-color:#AAAAFF" onclick="showa('guonei')">国内新闻</div>
        <div class="xiang" style="background-color:#4DFFFF" onclick="showa('guoji')">国际新闻</div>
        <div class="xiang" style="background-color:#d3a4ff" onclick="showa('tiyu')">体育新闻</div>
        <div class="xiang" style="background-color:#FFFFB9" onclick="showa('yule')">娱乐新闻</div>
    </div>
    
    <div id="guonei" class="xuanxiang">
        
    </div>
    
    <div id="guoji" class="xuanxiang">
        
    </div>
    
    <div id="tiyu" class="xuanxiang">
        
    </div>
    
    <div id="yule" class="xuanxiang">
        
    </div>
    
    
    <script type="text/javascript">
    
    function showa(d)
    {
        var div = document.getElementById(d);
        
        var suoyou = document.getElementsByClassName("xuanxiang"); 
        for(var i=0;i<suoyou.length;i++)
        {
            suoyou[i].style.display = "none";
        }
        
        div.style.display = "block";
        
    }
    
    </script>
    

      效果如图:

    第二种方法 网上找到的:

    <!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=utf-8" />
    <title>无标题文档</title>
    <script src="dist/js/jquery-1.11.2.min.js"></script>
    <style type="text/css">
    
     div{margin:0;padding:0;500px;height:300px;display:none;}
    .tab{margin:0;padding:0;list-style:none;500px;overflow:hidden;}
    .tab li{float:left;100px;height:30px;text-align:center;line-height:30px;cursor:pointer; border-top-right-radius:10px 10px; border-top-left-radius:10px 10px; }
     #on{display:block;}
    .tab li.cur{background:blue;}
    </style>
    </head>
    
    <body>
    
    <ul class="tab">
           <li  style="background-color:#AAAAFF;">选项卡 1 </li>
           <li style="background-color:#4DFFFF;"  class="cur">选项卡 2 </li>
           <li style="background-color:#FFFFB9;">选项卡 3 </li>
     </ul>
     <div style="background-color:#AAAAFF;"></div>
     <div style="background-color:#4DFFFF;" id="on"></div>
     <div style="background-color:#FFFFB9;" ></div>
    </body>
    <script type="text/javascript">
    $(document).ready(function(){
            $(".tab li").click(function(){
            $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
    $("div").hide().eq($(this).index()).show();
    
            });
        });
    
    
    </script>
    </html>
    

      效果如图:

  • 相关阅读:
    [转]Object Tracking using OpenCV (C++/Python)(使用OpenCV进行目标跟踪)
    [转]PIL、Pillow安装使用方法
    [转]痞子衡嵌入式:飞思卡尔Kinetis开发板OpenSDA调试器那些事(上)
    如何选择开源许可证?
    年复一年
    [转]TLD目标跟踪算法
    [转]pycharm中将ui文件转换成py文件
    ps矫正倾斜的扫描件内容
    ORM增删改查
    ORM配置
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6384087.html
Copyright © 2011-2022 走看看