专栏首页小闫笔记一些经典案例

一些经典案例

案例一:(实现效果,鼠标移动到哪个菜单上,哪个菜单会显示二级菜单,移开会收回。)

案例二:tab栏(选项卡)

鼠标滑过,显示对应的特殊样式,下面的内容替换为需要的内容。

无缝滚动一样是专有名词。

eq用下标取数据,index是获取下标。

两行代码有相同的部分,那么可以考虑使用链式编程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab_con{
            width:500px;
            height:350px;
            margin:50px auto 0;
        }
        .tab_btns{
            height:50px;
        }
        .tab_btns input{
            width:100px;
            height:50px;
            background:#ddd;
            border:0px;
            outline:none;
        }

        .tab_btns .active{
            background:gold;
        }

        .tab_cons{
            height:300px;
            background:gold;
        }

        .tab_cons div{
            height:300px;
            line-height:300px;
            text-align:center;
            display:none;
            font-size:30px;
        }

        .tab_cons .current{
            display:block;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
    $(function(){
        // 按钮鼠标移入: 这个按钮高亮(添加类active),下面要显示对应的内容(添加类current)
        $('input').mouseover(function(){
            // $(this).addClass('active')
            // $(this).siblings().removeClass()

            $(this).addClass('active').siblings().removeClass()

            // 显示内容 三个div -- 获取到鼠标移入的菜单的下标,用这个下标在三个内容div中选出和这个下标相等的div显示即可
            var num = $(this).index()
            // alert(num)
            // $('.tab_cons div').eq(num).addClass('current')
            // // 已经显示的div的兄弟标签隐藏
            // $('.tab_cons div').eq(num).siblings().removeClass()
            $('.tab_cons div').eq(num).addClass('current').siblings().removeClass()
        })
    })
    </script>
</head>

<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_cons">
            <div class="current">按钮一对应的内容</div>
            <div>按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>
</body>
</html>

案例三:层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级菜单</title> 
    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0px;
            padding:0px;
        }

        ul{list-style:none;}


        .menu{
            width:200px;
            margin:20px auto 0;
        }

        .menu .level1,.menu li ul a{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;           
        }

        .menu .level1{
            border-bottom:1px solid #afc6f6;

        }

        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;

        }

        .menu li ul li{
            border-bottom:1px solid #afc6f6;
        }



        .menu li ul{
            display:none;
        }

        .menu li ul.current{
            display:block;
        }

        .menu li ul li a:hover{
            background-color:#f6b544;
        }


    </style>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 单击一级菜单,滑动显示对应的二级菜单 -- 小ul
            $('.level1').click(function(){
                // $(this).next().slideDown();
                // $(this).parent().siblings().children('ul').slideUp()
                $(this).next().slideDown().parent().siblings().children('ul').slideUp()
            })
        })
    </script>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">手机</a>
            <ul class="current">
                <li><a href="#">iPhone X 256G</a></li>
                <li><a href="#">红米4A 全网通</a></li>
                <li><a href="#">HUAWEI Mate10</a></li>
                <li><a href="#">vivo X20A 4GB</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">笔记本</a>
            <ul>
                <li><a href="#">MacBook Pro</a></li>
                <li><a href="#">ThinkPad</a></li>
                <li><a href="#">外星人(Alienware)</a></li>
                <li><a href="#">惠普(HP)薄锐ENVY</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">电视</a>
            <ul>
                <li><a href="#">海信(hisense)</a></li>
                <li><a href="#">长虹(CHANGHONG)</a></li>
                <li><a href="#">TCL彩电L65E5800A</a></li>             
            </ul>
        </li>
        <li>
            <a href="#" class="level1">鞋子</a>
            <ul>
                <li><a href="#">新百伦</a></li>
                <li><a href="#">adidas</a></li>
                <li><a href="#">特步</a></li>
                <li><a href="#">安踏</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">玩具</a>
            <ul>
                <li><a href="#">乐高</a></li>
                <li><a href="#">费雪</a></li>
                <li><a href="#">铭塔</a></li>
                <li><a href="#">贝恩斯</a></li>
            </ul>
        </li>

    </ul>
</body>
</html>

案例四:获得和失去焦点

此案例是老版本的实现方法,现在html5.0会使用placeholder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('input').focus(function(){
                // 如果是默认值的时候才清空
                if($(this).val() == '请输入用户名' ){
                    $(this).val('')
                }
            })
            $('input').blur(function(){
                // 如果用户没有输入的时候 -- 输入的值为空 -- val为空
                if($(this).val() == ''){
                    $(this).val('请输入用户名')
                }
            })
        })
    </script>
</head>
<body>
    <input type="text" value="请输入用户名">
</body>
</html>

案例五:父级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .left,.right{
        position: fixed;
        top: 250px;
    }
    .left{
        left: 0;
    }
    .right{
        right: 0;
    }
    .left span,.right span{
        width: 20px;
        height: 20px;
        background: #ccc;
        font-size: 14px;
        color: #333;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        cursor: pointer;
    }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
    $(function(){
        // 左侧的span单击,隐藏left
        // $('.left span').click(function(){
        //     $('.left').hide(500)
        // })
        // $('.right span').click(function(){
        //     $('.right').hide(500)
        // })

        // 单击span,隐藏这个span 的父级
        $('span').click(function(){
            $(this).parent().hide(500)
        })
    })
    </script>
</head>
<body>
    <div class="left"><img src="images/left.jpg" alt=""><span>X</span></div>
    <div class="right"><img src="images/right.jpg" alt=""><span>X</span></div>
</body>
</html>

本文分享自微信公众号 - 全栈技术精选(Pythonnote),作者:小闫同学啊

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JQuery高级

    列一个变量,存储正则规则,用这个变量去test某个数据-----匹配True和不匹配False

    小闫同学啊
  • 框架学习前期知识点回顾

    ajax其实就是jQuery中的一个函数而已,它依赖于http协议,默认支持异步传输数据和局部刷新。此处的异步指的是ajax可以在发送数据的时候同时接收数据。它...

    小闫同学啊
  • JavaScript入门

    2看文字样式 T 单击目标文字,菜单栏下面查看文字效果---释放选择:ctrl + enter或选择其他工具

    小闫同学啊
  • 利用JQuery实现左侧菜单栏可折叠功能

    今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍...

    林老师带你学编程
  • 一个纯HTML+CSS写的下拉导航动画

    动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...

    德顺
  • JQuery实现层级菜单

    skylark
  • 级联下拉菜单效果

    <!doctype html> <html> <head> <script src="jquery.js"></script> <script> $(funct...

    用户1730674
  • CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

    在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

    前端博客 : alili.tech
  • HTML5 div css3漂亮的侧边菜单栏

    Java学习123
  • CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

    在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

    守候i

扫码关注云+社区

领取腾讯云代金券