文档章节

js实现导航页面

Reya滴水心
 Reya滴水心
发布于 2015/12/10 17:38
字数 404
阅读 78
收藏 6
点赞 0
评论 0

效果图:

代码:

<!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滴水心
粉丝 38
博文 75
码字总数 31862
作品 0
深圳
前端工程师
现代化自定制 - 页面上的自定制

博客地址:http://blog.csdn.net/FoxDave 本篇接上一篇,阐述一下关于页面上自定制的内容要如何进行现代化转换时的修复。 页面上的自定制 SharePoint有很多种经典网站页面如wiki、web部件页、...

justinliu927 ⋅ 05/28 ⋅ 0

JavaWeb01-HTML篇笔记(七)

.1 案例三:完成对注册页面的数据的简单校验.1.1.1 需求: 对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击提交,弹出一个对话框进行提示!! 1.1.2 分析:1.1.2.1 技术分...

我是小谷粒 ⋅ 04/28 ⋅ 0

weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术 ⋅ 05/27 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

cxwithyxy/Axure_Js_Inject

AxureJsInject v1.0 可以在产品原型(RP)中加入你想要的js代码,这些js代码会用浏览器浏览产品原型的时候执行 支持 目前支持 Axure rp 8.1.0.3372 其他版本有待测试 开始 在元件库中导入 Ax...

陈轩大魔王 ⋅ 04/15 ⋅ 0

手把手教你写网络爬虫(1):网易云音乐歌单

原文出处:拓海 大家好,《手把手教你写网络爬虫》连载开始了!在笔者的职业生涯中,几乎没有发现像网络爬虫这样的编程实践,可以同时吸引程序员和门外汉的注意。本文由浅入深的把爬虫技术和...

拓海 ⋅ 04/27 ⋅ 0

SpringBoot 缓存&资源优化

页面缓存 1. freemarker 的页面静态化 application.properties 配置实现浏览器缓存 这段配置是用来启用资源缓存处理。 借鉴官方文档:https://docs.spring.io/spring-boot/docs/1.5.4.RELEA...

FantJ ⋅ 06/11 ⋅ 0

将一个前端项目改写为chromo插件(一)

编写第一个chrome插件? 编写chrome插件完全就是前端知识加上一些专门的知识。 假设文件夹下有文件 嗯,现在看来他只是普通的html,其实,你只要在当前文件夹下加上文件,chrome浏览器就可以把...

saltfish666 ⋅ 05/27 ⋅ 0

RN与原生交互(一)——基本页面跳转

React Native(以下简称RN)开发app过程中大部分都可以在JS端完成,但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互,比如页面跳转和数据传递。本篇文章主要以...

不變旋律 ⋅ 06/13 ⋅ 0

浅谈前端入门以及项目初创的经验

从去年1月份到今天恰好一年,值此值得纪念的一天,来点评一下这一年来作为一个前端工程师遇到的坑和总结一些工作经验。 前端的入门从HTML的标签开始,分为 语义化 样式 语义相当于word的格式...

qwop446 ⋅ 2016/01/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sbt网络问题解决方案

http://dblab.xmu.edu.cn/blog/maven-network-problem/

狐狸老侠 ⋅ 11分钟前 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 54分钟前 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部