• jQuery简单Tab选项卡制作


    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>tab选项卡</title>
    <script src="jquery.js"></script>
    <script>
    $(function(){
        var ali = $('.tabTitle ul li');
        var aDiv = $('.tabContent div');
        var timeId = null;
        ali.mouseover(function() {
            //setTimeout()的作用是延迟某一段代码的执行
            var _this = $(this);
            timeId = setTimeout(function(){
                var index = _this.index();
                _this.addClass('current').siblings().removeClass('current');
                aDiv.eq(index).show().siblings().hide();
            },300);
        }).mouseout(function(){
            //clearTimeout的作用是清除定时器
            clearTimeout(timeId);
        });
    });
    </script>
    <style>
    *{padding:0;margin:0;}
    body{margin:50px;}
    li{list-style: none;}
    .tabTitle ul{overflow: hidden;_height:1px;}
    .tabTitle ul li{float:left; border:1px solid #abcdef; height: 30px; line-height: 30px; padding:0 15px; margin-right:3px; cursor:pointer;}
    .tabContent div{border:1px solid #f60; width: 300px; height: 100px; padding:10px;}
    .hide{display: none;}
    .current{background: #abcdef; color: #fff;}
    </style>
    </head>
    <body>
        <!-- 这里是标签标题 -->
        <div class="tabTitle">
            <ul>
                <li class="current">xhtml</li>
                <li>css</li>
                <li>jquery</li>
            </ul>
        </div>
        <!-- 这里是内容 -->
        <div class="tabContent">
            <div>xhtml的内容</div>
            <div class="hide">css的内容</div>
            <div class="hide">jQuery的内容</div>
        </div>
    </body>
    </html>
  • 相关阅读:
    Unity错误提示大全(遇到问题就更新)
    使用log4Net输出调试信息
    3.创建Manager类,演示对TestUser进行增删改查功能
    2.创建NHibernateHelper帮助类,生成sessionFactory
    1.使用FluentNHibemate 操作数据库,添加映射到数据库
    MySql介绍与安装
    搭建unity客户端
    搭建服务器端
    Photon介绍与安装
    简练软考知识点整理-实施定量风险分析
  • 原文地址:https://www.cnblogs.com/littlefly/p/3662402.html
Copyright © 2020-2023  润新知