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脚本实现Web页面信息交互
Oct 11 Javascript
用javascript控制iframe滚动的代码
Apr 10 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
如何更好的编写js async函数
May 13 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
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
php下过滤HTML代码的函数
2007/12/10 PHP
PHP strtotime函数详解
2009/12/18 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php时间戳转换代码详解
2019/08/04 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python实现复制整个目录的方法
2015/05/12 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python模块导入的细节详解
2018/12/10 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python中property和setter装饰器用法
2019/12/19 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
python中Django文件上传方法详解
2020/08/05 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
班级入场式解说词
2014/02/01 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
大学生社会实践评语
2014/04/25 职场文书
金融事务专业求职信
2014/04/25 职场文书
经费申请报告范文
2015/05/18 职场文书
停发工资证明范本
2015/06/12 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技