• 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>
  • 相关阅读:
    k8s如何删除处于terminating状态的ns资源
    js 可选链操作符
    Pod 配置,生命周期,调度
    cocos creator (二)
    cocos creator
    域名
    05月19日15:40:00 学习进度笔记
    springboot使用springsecuity
    05月19日16:51:53 学习进度笔记
    05月19日16:51:59 学习进度笔记
  • 原文地址:https://www.cnblogs.com/littlefly/p/3662402.html
Copyright © 2020-2023  润新知