zoukankan      html  css  js  c++  java
  • 如何使用jquery是新tab形式

    <html>
    <title>
    </title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
       $("ul.menu li:first-child").addClass("current");
       $("div.content").find("div.layout:not(:first-child)").hide();
       $("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)});
       $("ul.menu li").click(function(){
           var c = $("ul.menu li");
           var index = c.index(this);
           var p = idNumber("No");
            show(c,index,p);
        });
        
        function show(controlMenu,num,prefix){
            var content= prefix + num;
            $('#'+content).siblings().hide();
            $('#'+content).show();
            controlMenu.eq(num).addClass("current").siblings().removeClass("current");
        };
     
        function idNumber(prefix){
            var idNum = prefix;
            return idNum;
        };
     });
     </script>
    <style type="text/css">
    * {margin:0; padding:0}
    ul,li { 
    list-style:none
    }
    .box {
    border:1px solid #ccc; 
    margin:10px; 
    }
    .tagMenu {
    height: 24px;
    position:relative; 
    border-bottom:1px solid #999
    }
    .tagMenu ul {
    position:absolute; 
    bottom:-1px; 
    height:26px;
    }
    ul.menu li {
    float:left; 
    border-left:1px solid #999; 
    padding:0 12px; 
    cursor:pointer
    }
    ul.menu li.current {
    border:1px solid #999; 
    border-bottom:none; 
    background:#fff; 
    height:25px; 
    line-height:26px; 
    margin:0
    }
     .content { padding:10px}
     </style>
    <body>
    <div class="box">
       <div class="tagMenu">
           <ul class="menu">
               <li>Label 1.1</li>
               <li>Label 1.2</li>
               <li>Label 1.3</li>
               <li>Label 1.4</li>
            </ul>
        </div>
        <div class="content">
            <div class="layout">infomation 1.1</div>
            <div class="layout">infomation 1.2</div>
            <div class="layout">infomation 1.3</div>
            <div class="layout">infomation 1.4</div>
        </div>
     </div>
    </body>
    </html>

    实现的效果:


     

  • 相关阅读:
    使用ConfigFilter
    读取特定文件,替换第一行内容
    sqlserver,oracle,mysql等的driver驱动,url怎么写
    Excel 数字处理
    ResultMap详解
    正则表达式
    Tomasulo algorithm
    scoreboarding
    data hazard in CPU pipeline
    差分绕线间距对阻抗的影响
  • 原文地址:https://www.cnblogs.com/chenjianhong/p/4144894.html
Copyright © 2011-2022 走看看