zoukankan      html  css  js  c++  java
  • Jquery实现菜单栏

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="JQ.js"></script>
        <script>
            window.onload = function () {
                    $(".title").click(function () {
                    $('.body').addClass('hide');
                    $(this).next().removeClass("hide");
                });
            };
        </script>
        <style>
            body {
                margin: 0;
            }
            .menu {
                 234px;
                background-color: steelblue;
            }
            .item {
    
                line-height: 50px;
                text-align: center;
                border-bottom: white solid 1px;
            }
            .hide {
                display: none;
            }
            .title:hover {
                color: green;
                cursor: pointer;
            }
            .content {
                background-color: #b0b0b0;
                border: black solid 1px;
            }
        </style>
    </head>
    <body>
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="body hide" id="d1">
                <div class="content">内容1</div>
                <div class="content">内容1</div>
                <div class="content">内容1</div>
            </div>
        </div>
    
        <div class="item">
            <div class="title">菜单二</div>
            <div class="body hide ">
                <div class="content">内容1</div>
                <div class="content">内容1</div>
                <div class="content">内容1</div>
                <div class="content">内容1</div>
                <div class="content">内容1</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="body hide">
                <div class="content">内容1</div>
                <div class="content">内容1</div>
                <div class="content">内容1</div>
            </div>
        </div>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    成为一个会思考的学习者
    我的第4篇博客
    我的第3篇博客
    第2次作业
    第一次作业:大学,人生的另一个新的开始
    第四次作业
    第三次作业
    第二次作业
    作为大一新生的感悟
    第四次作业
  • 原文地址:https://www.cnblogs.com/Kingfan1993/p/9810463.html
Copyright © 2011-2022 走看看