zoukankan      html  css  js  c++  java
  • 常用tab选项卡代码

    <div class="box">
        <ul>
            <li class="one">课程介绍</li>
            <li>报名流程</li>
            <li>常见问题</li>
        </ul>
        <div class="content">
            <div class="ct">随着移动互联网的兴起,互联网行业正向更加智能化的Web3.0时代迈进,中国互联网行业进入了高速发展的势态,PHP语言已经为大部分企业广泛应用和重视 </div>
            <div class="ct">在jQuery迅速发展的同时,一些大的厂商也看中了商机。2009年9月,微软和诺基亚公司正式宣布支持开源的jQuery库,另外,微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。 </div>
            <div class="ct">2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。 </div>
        </div>
    </div>
     * {
        padding:0;
        margin:0;
    }
    body {
        font-size:12px;
        padding:100px;
    }
    ul {
        list-style-type:none;
    }
    .box ul {
        height:30px;
        line-height:30px;
    }
    .box ul li {
        float:left;
        padding:0 10px;
        position:relative;
        cursor:pointer;
        border:1px solid #000;
        margin-right:5px;
        border-bottom:none;
    }
    .box ul li.two {
        background:orange;
    }
    .content {
        width:325px;
        border:1px solid #000;
        padding:10px;
        height:100px;
    }
    * html .content {
        margin-top:-1px;
    }
    .box ul li.one {
        background:#fff;
    }
    $(document).ready(function() {
        $('.ct:gt(0)').hide();
        var hdw = $('.box ul li');
        hdw.hover(function() {
            $(this).addClass('two').siblings().removeClass('two');
        });
        hdw.click(function() {
            $(this).addClass('one').siblings().removeClass();
            var hdw_index = hdw.index(this);
            $('.ct').eq(hdw.index(this)).show().siblings().hide();
        });
    });
  • 相关阅读:
    Git仓库操作笔记[Git repositories]
    supervisor 使用
    python动态加载(二)——动态加载类
    python动态加载(一)——加载方法
    python连接hdfs常用操作
    python对文件进行并行计算初探
    python加载包顺序和PYTHONPATH
    python实现读取数据库的断点续传
    python实现读取文件的断点续传
    python启动一个新进程
  • 原文地址:https://www.cnblogs.com/phpfensi/p/7298506.html
Copyright © 2011-2022 走看看