第二十七篇导航栏和内容块

来源：互联网发布：js split("") 编辑：程序博客网时间：2024/06/07 07:16

导航栏和内容块

上节课留下了一个小练习：

老师做了一份，但是没有图片图标，所以代码里没有用到 img 标签。

在写之前，我们要分析吧，这个页面，难度只有左侧的导航栏。因为动态！

我们可以用到jQuery的mouseover()移入方法和 mouseout()移出方法，还有click()点击方法，点击一级菜单，弹出二级菜单，老师用的是slideToggle()方法，jQuery特效效果，滑动效果。

好啦，光说怎么好学？我们看代码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>综合之前的知识，写一个动态页面</title>    <!--使用jQuery一定不要忘记引用jQuery文件-->    <script src="../js/jquery-1.12.2.min.js"></script>    <style>        html,body{height: 100%;margin: 0;}        #div0{            /*给最外层div宽度，然后居中显示*/            width: 1360px;            margin: 0 auto;            height: 100%;        }        #left{            height: 100%;            position: fixed;            float: left;            background-color: #393D49;            width: 15%;            color:#d9d9d9;            padding:0 10px;        }        .rit{            float: right;        }        .f1{            font-size: 21px;        }        .dd{            padding: 10px 0;        }        .f2{            display: none;        }        .f3{            padding:10px 0 10px 30px;            font-size:17px;        }        .a{            background-color: #000;            color:#fff;            font-weight: 700;        }        .b{            background-color: #009688;            color:#fff;            cursor: pointer;        }        #center{            float: right;            width: 83%;        }        #c1{            float: left;            width: 100%;            margin-top: 20px;            padding-bottom:10px;            border-bottom:1px solid #dedede;        }        #a1{            float: left;            background-color: #1AA094;            color:#fff;            padding:10px;            text-decoration: none;            font-size: 12px;        }        #f1{            float: right;        }        #f1 span{            font-size: 14px;            border: 1px solid #dedede;            font-weight: 700;            background-color: #FBFBFB;            padding:5px 15px;        }        #g{            font-size: 15px;            border: 1px solid #dedede;            padding:3px 15px 4px 15px;            margin-left: -9px;        }        #su{            color:#fff;            background-color: #1AA094;            border: 1px solid #dedede;            margin-left: -5px;            padding:6px 7px 5px 7px;        }        #ta{            float: left;            width: 100%;            margin-top:20px;        }        #ta th{            background-color: #F2F2F2;            border: 1px solid #dedede;        }        td{            border: 1px solid #dedede;            text-align: center;        }    </style></head><body><!--给一个最外层div控制宽度，考虑到各位同学和老师电脑分辨率不一样，就演示一下1360px宽度--><div id="div0">    <div style="float:left;width: 100%;height: 100%;">        <!--这个left div，是左侧导航栏。-->        <div id="left">            <!--class="f1" 的都是一级菜单-->            <div class="f1">                <div class="dd">                    系统配置                    <span class="rit">▼</span>                </div>            </div>            <!--class="f2" 的都是二级菜单-->            <div class="f2">                <!--二级菜单里，划分-->                <div class="f3">葫芦娃</div>                <div class="f3">西游记</div>                <div class="f3">三国</div>            </div>            <div class="f1">                <div class="dd">                    菜单配置                    <span class="rit">▼</span>                </div>            </div>            <div class="f2">                <div class="f3">左导航栏</div>                <div class="f3">顶导航栏</div>            </div>            <div class="f1">                <div class="dd">                    内容管理                    <span class="rit">▼</span>                </div>            </div>            <div class="f2">                <div class="f3">文章管理</div>                <div class="f3">评论管理</div>            </div>            <div class="f1">                <div class="dd">                    用户管理                    <span class="rit">▼</span>                </div>            </div>            <div class="f2">                <div class="f3">普通用户</div>                <div class="f3">管理员</div>                <div class="f3">权限组</div>                <div class="f3">会员等级</div>            </div>            <div class="f1">                <div class="dd">                    记录管理                    <span class="rit">▼</span>                </div>            </div>            <div class="f2">                <div class="f3">聊天记录</div>                <div class="f3">登录记录</div>                <div class="f3">交易记录</div>            </div>            <div class="f1">                <div class="dd">                    扩展管理                    <span class="rit">▼</span>                </div>            </div>            <div class="f2">                <div class="f3">钩子</div>                <div class="f3">插件</div>            </div>        </div>        <!--以上是左侧导航栏-->        <!--以下是中间内容部分-->        <div id="center">            <div id="c1">                <a id="a1" href="javascript:;">添加用户</a>                <form id="f1" action="#" method="post">                    <span>关键字</span>                    <input id="g" type="text" placeholder="请输入关键字"/>                    <input id="su" type="submit" value="搜索"/>                </form>            </div>            <table cellspacing="0" id="ta">                <tr>                    <th>ID</th>                    <th>用户名</th>                    <th>手机</th>                    <th>邮箱</th>                    <th>状态</th>                    <th>创建时间</th>                    <th>最后登录时间</th>                    <th>最后登录IP</th>                    <th>操作</th>                </tr>                <tr>                    <td>1</td>                    <td>2</td>                    <td>3</td>                    <td>4</td>                    <td>5</td>                    <td>6</td>                    <td>7</td>                    <td>8</td>                    <td>9</td>                </tr>            </table>        </div>        <!--以上是中间内容部分-->    </div></div><!--以下是写 js --><script>    var a = $(".f1"); //将此类传给我们声明的a来控制    //鼠标移入一级菜单，添加类    a.mouseover(function (){        //addClass()方法是添加此类        $(this).children(".dd").addClass("a");    });    //鼠标移入一级菜单，删除类    a.mouseout(function (){        //removeClass()方法是删除此类        $(this).children(".dd").removeClass("a");    });    //鼠标点击一级菜单，弹出相应的二级菜单    a.click(function (){        //先隐藏所有二级菜单并且改变后面的内容        a.next().slideUp();        a.find(".rit").text('▼');        //判断它的内容，然后做出修改        if($(this).find(".rit").text() == '▼'){            $(this).find(".rit").text('▲');        }        else{            $(this).find(".rit").text('▼');        }        //现在当前一级菜单下面的二级，使用的是滑动效果 取反向        $(this).next().slideToggle();    });    //以下是二级菜单的 样式    var b =$(".f3");//将此类传给我们声明的b来控制    //移入时候，增加样式    b.mouseover(function (){        $(this).addClass("b");    });    //移出时候，删除样式    b.mouseout(function (){        $(this).removeClass("b");    });</script></body></html>

260行左右的代码，如果我们使用外部css和js，那么html页面的代码就会减少很多。因为老师是演示，就不躲躲藏藏的，就全写在页面上。同学们重点注意看，左侧导航栏，一级菜单和二级菜单的关系。

老师用到的是jQuery，同学们如果直接copy过去，主要jQuery文件的引用和路径

阅读全文

0 0

第二十七篇 导航栏和内容块

导航栏和内容块

第二十七篇导航栏和内容块