jQuery实用案例之多Tab切换、下拉菜单、导航栏动态显示

最新推荐文章于 2022-12-21 16:11:23 发布

小龙爷ღ

最新推荐文章于 2022-12-21 16:11:23 发布

阅读量1.3k

点赞数

分类专栏： JQuery 文章标签： jQuery jquery实现下拉菜单 jquery实现导航栏动态显示多Tab切换

本文链接：https://blog.csdn.net/qq_45086879/article/details/100142016

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、多Tab切换

效果图：点击上面的套餐选择，下面显示对应的套餐内容

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多tab切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        #container {
            position: relative;
        }

        #content1, #content2, #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }

        #tab1, #content1 {
            background-color: #ffcc00;
        }

        #tab2, #content2 {
            background-color: #ff00cc;
        }

        #tab3, #content3 {
            background-color: #00ccff;
        }
    </style>
</head>
<body>
<h2>多Tab点击切换</h2>

<ul id="tab">
    <li id="tab1" value="1">10元套餐</li>
    <li id="tab2" value="2">30元套餐</li>
    <li id="tab3" value="3">50元包月</li>
</ul>

<div id="container">
    <div id="content1">
        10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
    </div>
    <div id="content2" style="display: none">
        30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
    </div>
    <div id="content3" style="display: none">
        50元包月详情：<br/>&nbsp;每月无限量随心打
    </div>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
      
       //方法一 更简单

       var $contents = $('#container>div')
       var $lis = $("#tab>li")
       // 给3个li加监听
       $lis.click(function () { // 隐式遍历
       // 隐隐藏所有内容div
       // $contents.css('display', 'none')
       $contents.hide()
       // 显示对应的内容div
       // 得到当前点击的li在兄弟中下标
       var index = $(this).index()
       // 找到对应的内容div, 并显示
       $contents[index].style.display = 'block'
        // $($contents[index]).css('display', 'block')
       })
        
    
        //方法二


        var $contents = $("#container div");
        var divIndex = 0;//当前显示的内容div的下标
        $("#tab>li").click(function () {
            // 隐藏当前已经显示的内容div
            $contents[divIndex].style.display = "none";
            // 得到当前点击的li在兄弟中下标
            var liIndex = $(this).index();
            // 找到对应的内容div, 并显示
            $contents[liIndex].style.display = "block";
            //更新下标
            divIndex = liIndex;
        })
    })
</script>
</body>
</html>

二、下拉菜单

效果图：鼠标移动到一级菜单，显示对应菜单下的二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li {
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $(".wrap>ul>li>a")
            .mouseenter(function () {
                $(this).next().show();
            })
            .mouseleave(function () {
                $(this).next().hide();
            })
    })
</script>
</body>
</html>

三、导航栏动态显示

效果图：鼠标移动到菜单栏，滑出显示对应的子菜单内容并且可以停留在子菜单上

案例：注意jQuery中stop()的用法，运行之后立刻结束当前页上的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏动态显示效果</title>
    <style rel="stylesheet">
        * {
            margin: 0;
            padding: 0;
            word-wrap: break-word;
            word-break: break-all;
        }

        body {
            background: #FFF;
            color: #333;
            font: 12px/1.6em Helvetica, Arial, sans-serif;
        }

        a {
            color: #0287CA;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        ul, li {
            list-style: none;
        }

        img {
            border: none;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 1em;
        }

        html {
            overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
        }

        #navigation {
            width: 784px;
            padding: 8px;
            margin: 8px auto;
            background: #3B5998;
            height: 18px;
        }

        #navigation ul li {
            float: left;
            margin-right: 14px;
            position: relative;
            z-index: 100;
        }

        #navigation ul li a {
            display: block;
            padding: 0 8px;
            background: #EEEEEE;
            font-weight: 700;
        }

        #navigation ul li a:hover {
            background: none;
            color: #fff;
        }

        #navigation ul li ul {
            background-color: #88C366;
            position: absolute;
            width: 80px;
            overflow: hidden;
            display: none;
        }

        #navigation ul li ul li {
            border-bottom: 1px solid #BBB;
            text-align: left;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="navigation">
    <ul>
        <li><a href="#">首 页</a></li>
        <li><a href="#">衬 衫</a>
            <ul>
                <li><a href="#">短袖衬衫</a></li>
                <li><a href="#">长袖衬衫</a></li>
                <li><a href="#">无袖衬衫</a></li>
            </ul>
        </li>
        <li><a href="#">卫 衣</a>
            <ul>
                <li><a href="#">开襟卫衣</a></li>
                <li><a href="#">套头卫衣</a></li>
            </ul>
        </li>
        <li>
            <a href="#">裤 子</a>
            <ul>
                <li><a href="#">休闲裤</a></li>
                <li><a href="#">卡其裤</a></li>
                <li><a href="#">牛仔裤</a></li>
                <li><a href="#">短裤</a></li>
            </ul>
        </li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $("#navigation>ul>li:has(ul)").hover(function () {
            $(this).children("ul").stop(true).slideDown();
        },function () {
            $(this).children("ul").stop(true).slideUp();
        })
    })
</script>
</body>
</html>

小龙爷ღ

关注

0
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
jQuery实用案例之多Tab切换、下拉菜单、导航栏动态显示

一、多Tab切换效果图：点击上面的套餐选择，下面显示对应的套餐内容案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多tab切换</title> <style> ...
复制链接

扫一扫

专栏目录