文档章节

js实现导航页面

Reya滴水心
 Reya滴水心
发布于 2015/12/10 17:38
字数 404
阅读 82
收藏 6

效果图:

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <title>管理页面nav导航</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        position: relative;
        overflow: hidden;
        width:200px;
        border:1px solid #ccc;
        margin:10px;
        padding:10px;
        box-shadow: 0 0 6px #333;
    }
    li{
        list-style: none;
        background: pink;
        line-height:24px;
        margin:10px auto;
        cursor:pointer;
    }
    p{
        background: green;
        padding-left: 2em;
        cursor:pointer;
    }
    li p{
        display: none;
    }
    .open{
        color:blue;
    }
    </style>
</head>
<body>
    <div id="nav" class="wrapper">
        <ul>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第一个导航列表
                <p>- Hello World</p>
                <p>- Good Morning</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第二个导航列表
                <p>- First</p>
                <p>- Second</p>
                <p>- Third</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第三个导航列表
                <p>- Finished</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第四个导航列表
                <p>- Hello World</p>
                <p>- Good Morning</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第五个导航列表
                <p>- First</p>
                <p>- Second</p>
                <p>- Third</p>
            </li>
            <li><img src="images/acorn.ico" alt="" class="icon-img">第六个导航列表
                <p>- Finished</p>
            </li>
        </ul>
    </div>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    var liList = $("#nav li") ;
    for(var i=0,max=liList.length;i<max;i++){
        $(liList[i]).attr("data-index",i) ;
    }
    liList.click(function(){
        var self = this;
        for(var i=0,max=liList.length;i<max;i++){
            if(i == $(self).data("index")){
                if($(self).hasClass("open")){
                    $(self).removeClass("open") ;
                    $(self).find("p").hide();
                    $(self).find(".icon-img").css({"transform":"rotate(0)","transition":"all 0.5s"});
                }
                else{
                    $(self).addClass("open") ;
                    $(self).find("p").show();
                    $(self).find(".icon-img").css({"transform":"rotate(180deg)","transition":"all 0.5s"});
                }
            }
            else{
                if($(liList[i]).hasClass("open")){
                    $(liList[i]).removeClass("open") ;
                    $(liList[i]).find("p").hide();
                    $(liList[i]).find(".icon-img").css({"transform":"rotate(0)","transition":"all 0.5s"});
                }
            }
        }
    });
    </script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
Reya滴水心
粉丝 39
博文 88
码字总数 31966
作品 0
深圳
前端工程师
私信 提问
在 WebView 中建立 Android Apps

1. Web Apps的两种形式 在Android中,Web Apps有两种形式供用户访问。一种就是用手机上的浏览器直接访问的网络应用程序,这种情况用户不需要额外安装其他应用,只要有浏览器就行;而另一种,...

华宰
2011/09/06
1K
1
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
【转载】微信公众号获取用户地理位置并列出附近的门店

思路分析: 1、在微信公众号内获取用户地理位置 需要js-sdk签名包(关于如何获取文档有介绍) 2、根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的...

php的小菜鸟
2017/07/21
0
0
页面跳转事件不加载?

我在header里写了两个navbar的导航,我想实现在页面一开始只显示第一个navbar,隐藏第二个,使用javascript写的。但点击链接页面跳转后该功能就失效了,javascript里的内容没有读,不过刷新页...

dengxue
2014/05/04
800
3
jquery问题,求高手解决,有偿

站点播放页面剧集列表功能改写 现有的站点播放页面 如: http://www.haju123.com/daluju/3600/e6324ce171c459c7.html 可以看到右边效果 这是第六集如图: 第15集效果如图 点展开后效果如图 以上...

你好里
2012/04/27
745
0

没有更多内容

加载失败,请刷新页面

加载更多

Supplier函数式接口

Supplier接口的不传入参数,返回一个值。真是一个无私奉献的接口,还没有default方法。 下面就想用一个接口试试,其实我本来用的是IntSupplier,但是发现在使用方法引用的时候,不好把Math....

woshixin
16分钟前
0
0
MyBaties一级缓存

一、一级缓存简介 在系统代码的运行中,我们可能会在一个数据库会话中,执行多次查询条件完全相同的Sql,鉴于日常应用的大部分场景都是读多写少,这重复的查询会带来一定的网络开销,同时sel...

嘴角轻扬30
23分钟前
0
0
jquery

语法 描述 实例 $("*") 选取所有元素 在线实例 $(this) 选取当前 HTML 元素 在线实例 $("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例 $("p:first") 选取第一个 <p> 元素 在线实例 ...

mskk
28分钟前
1
0
微信红包设计方案

前言 微信红包一经推出,春节期间微信用户红包总发送量达80.8亿,红包峰值40.9w/秒,在如此量级下,系统设计存在各种变数,稍有闪失会功亏一篑。 红包系统 红包系统有三部分组成:信息流,业...

春哥大魔王的博客
38分钟前
1
0
微信开发-正式号的配置

1、设置相关 业务域名的设置(不设置的话,相关页面会显示防欺诈盗号信息提示) JS接口安全域名设置 网页授权域名设置 注意:以上三个设置中都有下载文件的提示,此文件内容一样,下载一个即可...

Code辉
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部