文档章节

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
深圳
前端工程师
js 操作frameset frame 对象

框架编程概述 一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框...

索隆
2011/12/20
0
0
js 操作frameset frame 对象

框架编程概述 一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框...

kisshua
2011/12/19
0
1
tab页签切换----bootstrap

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a h......

freedonn
2014/11/07
0
0
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
06/21
0
0
分享一个超酷javascript全屏幻灯导航(fullscreen slide navigat...

日期:2012/01/21 来源:GBin1.com 在线演示 在线下载 这篇文章介绍了如何使用幻灯方式来进行全屏幕页面导航,包括了16个幻灯,4个一行,一共4行。并且通过了CSS3箭头添加了动画导航效果。而...

gbin1
2012/01/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
26分钟前
0
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部