jQuery+CSS实现简单切换菜单示例


Posted in Javascript onJuly 27, 2016

本文实例讲述了jQuery+CSS实现简单切换菜单的方法。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $(function(){
       toggleEvent(0);
       var mTitle = $(".menuTitle");
       mTitle.each(function(i){
        $(this).click(function(){
         toggleSlideEvent(i);
         $(this).css("border-bottom","1px #ccccff solid");
        });
       });
     });
     function toggleSlideEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).slideDown();
      $(".menuTitle").each(function(){
        $(this).css("border-bottom","0px #ccccff solid");
      });
     }
     function toggleEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).css("display","block");
      $(".menuTitle").eq(i).css("border-bottom","1px #ccccff solid");
     }
  </script>
  <style type="text/css">
    .menu1
    {
      border: 1px #CCCCFF solid;
      border-top: 0px;
      width: 160px;
    }
    .menuTitle
    {
      width: 100%;
      height: 26px;
      border-bottom: 0px #CCCCFF solid;
      border-top: 1px #CCCCFF solid;
      text-align: left;
      line-height: 26px;
      cursor: pointer;
    }
    ul
    {
      border: 0px #CCCCFF solid;
      width: 100%;
      margin-left: 0px;
      margin-top: 0px;
    }
    ul li
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
    }
    ul li:hover
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
      cursor:pointer;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div class="menu1">
    <div class="menuTitle">
      TITLE1</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE2</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE3</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
  </div>
  </form>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
AngularJS 指令详细介绍
Jul 27 #Javascript
js中遍历Map对象的方法
Jul 27 #Javascript
angular.js分页代码的实例
Jul 27 #Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 #Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 #Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 #Javascript
js中遍历对象的属性和值的方法
Jul 27 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
pip命令无法使用的解决方法
2018/06/12 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
小小商店教学反思
2014/04/27 职场文书
网络编辑求职信
2014/04/30 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
python状态机transitions库详解
2021/06/02 Python
浅谈Python魔法方法
2021/06/28 Java/Android
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
Python开发五子棋小游戏
2022/05/02 Python