一、实现效果

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

2、添加CSS样式

3、最终效果

二、JQuery代码

  1.   <!--编写JQuery代码-->
  2.      <script type="text/javascript">
  3.          $(document).ready(function(){
  4.              $(".level1>a").click(function(){
  5.                  $(this).addClass("current")     //给当前元素添加current样式
  6.                          .next().show()     //下一个元素显示
  7.                          .parent().siblings().children("a").removeClass("current")     //父元素的同辈元素的子元素<a>移除“current”样式
  8.                          .next().hide();  //他们的下一个元素隐藏
  9.                  return false;
  10.              })
  11.          })
  12.      </script>

三、完整代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title>JQuery制作导航栏</title>
  6.      <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>    <!--引入JQuery库文件-->
  7.      <style type="text/css">
  8.          /*设置通用样式*/
  9.          *{
  10.               padding: 0;
  11.               margin: 0;
  12.           }
  13.          .box{
  14.              margin: auto;
  15.              border:  solid #BEBEBE 1px;
  16.              width: 160px;
  17.          }
  18.          ul{
  19.              list-style: none;
  20.          }
  21.          a {
  22.              color:#00007F;
  23.              text-decoration:none;
  24.              line-height: 28px;
  25.          }
  26.  
  27.          /*level1*/
  28.          .level1 a{
  29.              display: block;    /*!!!转换为块状元素*/
  30.              height: 30px;
  31.              width: 150px;
  32.              background-color: #EBF3F8;
  33.              padding-left: 10px;
  34.              border: solid 1px #BEBEBE;
  35.          }
  36.          .level1 a.current{
  37.              background-color:#B1D7EF;
  38.          }
  39.          /*level2*/
  40.          .level2 a{
  41.              background: #ffffff;
  42.              color: #8E8E8E;
  43.              border: none;
  44.          }
  45.          .level2 a:hover {
  46.              color:red;
  47.          }
  48.          .level2{
  49.              display: none;
  50.          }
  51.      </style>
  52.  
  53.      <!--编写JQuery代码-->
  54.      <script type="text/javascript">
  55.          $(document).ready(function(){
  56.              $(".level1>a").click(function(){
  57.                  $(this).addClass("current")     //给当前元素添加current样式
  58.                          .next().show()     //下一个元素显示
  59.                          .parent().siblings().children("a").removeClass("current")     //父元素的同辈元素的子元素<a>移除“current”样式
  60.                          .next().hide();  //他们的下一个元素隐藏
  61.                  return false;
  62.              })
  63.          })
  64.      </script>
  65.  
  66.  </head>
  67.  <body>
  68.      <div class="box">
  69.          <ul class="menu">
  70.              <li class="level1">
  71.                  <a href="#">衬衫</a>
  72.                  <ul class="level2">
  73.                      <li><a href="#">短袖衬衫</a></li>
  74.                      <li><a href="#">长袖衬衫</a></li>
  75.                      <li><a href="#">短袖T恤</a></li>
  76.                      <li><a href="#">长袖T恤</a></li>
  77.                  </ul>
  78.              </li>
  79.              <li class="level1">
  80.                  <a href="#">卫衣</a>
  81.                  <ul class="level2">
  82.                      <li><a href="#">开襟卫衣</a></li>
  83.                      <li><a href="#">套头卫衣</a></li>
  84.                      <li><a href="#">运动卫衣</a></li>
  85.                      <li><a href="#">童装卫衣</a></li>
  86.                  </ul>
  87.              </li>
  88.              <li class="level1">
  89.                  <a href="#">裤子</a>
  90.                  <ul class="level2">
  91.                      <li><a href="#">短裤</a></li>
  92.                      <li><a href="#">休闲裤</a></li>
  93.                      <li><a href="#">牛仔裤</a></li>
  94.                      <li><a href="#">免烫卡其裤</a></li>
  95.                  </ul>
  96.              </li>
  97.          </ul>
  98.      </div>
  99.  </body>
  100.  </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. java 数组中插入新的元素

    class Demo1 { public static void main(String[] args) { /* 5. 有如下歌曲数组 String[] musics = new String[]{ ...

  2. JS && JSON

    将Json字符串转为Json对象以下3种方式: eval('(' + str + ')'); JSON.parse(str); jQuery.parseJSON(str): 将Json对象转为字符串: ...

  3. Asp.net导出Excel（HTML输出方法）

    主要思路: 实例化Gridview,将值绑定后输出...(用烂了的方法) 贴上核心代码: public static void ExportToExcel(DataTable dataList, st ...

  4. SeekBar进度条简单案例

    SeekBar是进度条.我们使用进度条时,可以使用系统默认的进度条:也可以自定义进度条的图片和滑块图片等 向右拉进度条让图片显示出来 向右拉五角星加载有色进度条 baseSeekBar package ...

  5. 洛谷 P1026 统计单词个数 Label：dp

    题目描述 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<=40),且每份中包含的单 ...

  6. MySQL索引简述

    文章归属:http://feiyan.info/16.html,我想自己总结,但是发现此君总结的非常详细.直接搬过来了 关于MySQL索引的好处,如果正确合理设计并且使用索引的MySQL是一辆兰博基尼 ...

  7. HDU 1281 二分图

    棋盘游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  8. seajs实现JavaScript 的 模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  9. StringUtils中的常用的方法

    org.apache.commons.lang.StringUtils中常用的方法,这里主要列举String中没有,且比较有用的方法: 1. 检查字符串是否为空: static boolean isB ...

  10. 2016huasacm暑假集训训练四 DP_B

    题目链接:http://acm.hust.edu.cn/vjudge/contest/125308#problem/M 题意:有N件物品和一个容量为V的背包.第i件物品的费用是体积c[i],价值是w[ ...