一、实现效果

1.初始化效果：未添加样式和特效

2、添加CSS样式

3、最终效果

二、JQuery代码

  <!--编写JQuery代码-->

     <script type="text/javascript">

         $(document).ready(function(){

             $(".level1>a").click(function(){

                 $(this).addClass("current")     //给当前元素添加current样式

                         .next().show()     //下一个元素显示

                         .parent().siblings().children("a").removeClass("current")     //父元素的同辈元素的子元素<a>移除“current”样式

                         .next().hide();  //他们的下一个元素隐藏

                 return false;

             })

         })

     </script>

三、完整代码

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>JQuery制作导航栏</title>

     <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>    <!--引入JQuery库文件-->

     <style type="text/css">

         /*设置通用样式*/

         *{

              padding: 0;

              margin: 0;

          }

         .box{

             margin: auto;

             border:  solid #BEBEBE 1px;

             width: 160px;

         }

         ul{

             list-style: none;

         }

         a {

             color:#00007F;

             text-decoration:none;

             line-height: 28px;

         }

         /*level1*/

         .level1 a{

             display: block;    /*!!!转换为块状元素*/

             height: 30px;

             width: 150px;

             background-color: #EBF3F8;

             padding-left: 10px;

             border: solid 1px #BEBEBE;

         }

         .level1 a.current{

             background-color:#B1D7EF;

         }

         /*level2*/

         .level2 a{

             background: #ffffff;

             color: #8E8E8E;

             border: none;

         }

         .level2 a:hover {

             color:red;

         }

         .level2{

             display: none;

         }

     </style>

     <!--编写JQuery代码-->

     <script type="text/javascript">

         $(document).ready(function(){

             $(".level1>a").click(function(){

                 $(this).addClass("current")     //给当前元素添加current样式

                         .next().show()     //下一个元素显示

                         .parent().siblings().children("a").removeClass("current")     //父元素的同辈元素的子元素<a>移除“current”样式

                         .next().hide();  //他们的下一个元素隐藏

                 return false;

             })

         })

     </script>

 </head>

 <body>

     <div class="box">

         <ul class="menu">

             <li class="level1">

                 <a href="#">衬衫</a>

                 <ul class="level2">

                     <li><a href="#">短袖衬衫</a></li>

                     <li><a href="#">长袖衬衫</a></li>

                     <li><a href="#">短袖T恤</a></li>

                     <li><a href="#">长袖T恤</a></li>

                 </ul>

             </li>

             <li class="level1">

                 <a href="#">卫衣</a>

                 <ul class="level2">

                     <li><a href="#">开襟卫衣</a></li>

                     <li><a href="#">套头卫衣</a></li>

                     <li><a href="#">运动卫衣</a></li>

                     <li><a href="#">童装卫衣</a></li>

                 </ul>

             </li>

             <li class="level1">

                 <a href="#">裤子</a>

                 <ul class="level2">

                     <li><a href="#">短裤</a></li>

                     <li><a href="#">休闲裤</a></li>

                     <li><a href="#">牛仔裤</a></li>

                     <li><a href="#">免烫卡其裤</a></li>

                 </ul>

             </li>

         </ul>

     </div>

 </body>

 </html>

JQuery导航选择特效的更多相关文章

  1. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  2. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  3. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  4. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  5. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  6. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  7. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  8. 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]

    原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块 ...

  9. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

随机推荐

  1. 51nod1072(wythoff 博弈)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1072 题意: 中文题诶~ 思路: 博弈套路是有的, 找np局 ...

  2. Spring Security笔记：Hello World

    本文演示了Spring Security的最最基本用法,二个页面(或理解成二个url),一个需要登录认证后才能访问(比如:../admin/),一个可匿名访问(比如:../welcome) 注:以下内 ...

  3. mysql在linux下修改存储路径

    通过下面几步即可修改路径,这里的路径都是测试的路径,一般默认安装路径在/var/lib/mysql下,真正配置按照真实路径配置. 1.修改/etc/sysconfig/selinux文件:#SELIN ...

  4. Gamma校正与线性空间

    基础知识部分 为了方便理解,首先会对(Luminance)的相关概念做一个简单介绍.如果已经了解就跳到后面吧. 我们用Radiant energy(辐射能量)来描述光照的能量,单位是焦耳(J),因为光 ...

  5. 网络科学 - 社区发现 Community structure and detection及其几个实现工具

    首先什么是社区(Community structure)呢?其实并不是指一个网络相互连接的部分,而是一个网络中链接“紧密的部分”,至于怎么定义紧密就有很多方法了. 社区发现算法可以参考下面的博客:博客 ...

  6. Go语言 使用内置Http组件

    package main import ( "net/http" ) func SayHello(w http.ResponseWriter, req *http.Request) ...

  7. 浏览器-05 HTML和CSS解析1

    一个浏览器内核几个主要部分,HTML/CSS解析器,网络处理,JavaScript引擎,2D/3D图形引擎,多媒体支持等; HTML 解析和 DOM 网页基本结构 一个网页(Page),每个Page都 ...

  8. iOS 启动画面 代码自定义

    先来看一个可能会遇到的问题: 如果你已经删除了xcode为你的项目自动生成的LaunchScreen.storyboard, 然后你在测试你的app的时候发现,屏幕里出现了黑色的区域,如上图(画红线的 ...

  9. java基础-泛型1

    浏览以下内容前,请点击并阅读 声明 泛型的使用能使类型名称作为类或者接口定义中的参数,就像一般的参数一样,使得定义的类型通用性更强. 泛型的优势: 编译具有严格的类型检查 java编译器对于泛型代码的 ...

  10. 【游戏开发】小白学Lua(上)

    在很多游戏中,脚本语言是不可或缺的一部分,很多游戏都使用到了Lua,js,python一类的脚本,脚本语言可以在很多方面给开发进程带来帮助.脚本语言可以作为初始化文件读入变量和游戏数据的一个快速而方便 ...