//需求：分别点击html,css,js元素时展示对应的列表内容，其他列表内容要自动收起来

　　　

//代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

<style type="text/css">

  *{

         margin: 0;

         padding: 0;

      }

      ul{

         width: 200px;

         list-style: none;

         background-color: blueviolet;

         color: yellow;

      }

      h3,li li{

         height: 50px;

      }

      li ul{

         display: none;

      }

      .cur{

         background-color: red;

         color:pink;

      }

      .border{

         border: 1px solid black;

      }

</style>

</head>

<body>

<ul>

      <li class="border">

         <h3>html</h3>

         <ul class="inner">

            <li>标签</li>

            <li>选择器</li>

         </ul>

      </li>

      <li class="border">

         <h3>css</h3>

         <ul class="inner">

            <li>文档流</li>

            <li>选择器</li>

            <li>盒模型</li>

         </ul>

      </li>

      <li class="border">

         <h3>js</h3>

         <ul class="inner">

            <li>dom</li>

            <li>bom</li>

            <li>ecmascript</li>

         </ul>

      </li>

   </ul>

<script type="text/javascript">

  $("h3").mouseover(function(){

         $(this).addClass("cur");

      }).mouseout(function(){

         if ($(this).next().css("display")!="block") {

            $(this).removeClass("cur");

         }

      }).click(function(){

         // $(this).addClass("cur");

         $(this).next().slideToggle();  //$(this).next()值h3的下一个元素，也就是ul,slideToggle自动切换上下拉

         $(".inner").css("background","brown");　　//改变下拉选项的背景颜色

         $(this).parent().siblings().find("ul").slideUp().prev().removeClass("cur");

      })   

</script>

</body>

</html>

Jquery实现下拉tab切换的更多相关文章

  1. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  2. 一款jquery写出来的tab切换

    当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...

  3. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  4. 利用DropDownList实现下拉

    在视图的Model<Vo>里面我们需要使用IEnumerable来将别的列表的数据全部的转化为下拉列表.下面是关于在项目中实际的写法. 一:实现下拉属性列表的写法   通过使用Select ...

  5. jQuery实现简单的tab切换

    html: <section>   <nav id="nav">     <a class="on">tab1</a& ...

  6. jQuery带小图标的Tab切换焦点图

    在线演示 本地下载

  7. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

  8. tab切换中的滚动条下拉分页带来的问题

    相信做过tab切换中滚动条下拉分页的童鞋都知道,我们在用scroll方法来做滚动条下拉分页的时候,都是有bug,切换中间的内容会互相影响,为了解决这个问题,我总结了2种方法: 1.方法一: <! ...

  9. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. System.getProperty() 获取系统变量

    例:获取用户当前的工作目录 String CONFPREFIXURL = System.getProperty("user.dir"); System.out.println(CO ...

  2. oracle 高级函数2

    原 oracle 高级函数 2017年08月17日 16:44:19 阅读数:1731 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013278 ...

  3. springBoot整合mybatis-plus关闭自动转换小驼峰命名规则

    增加配置信息 mybatis-plus: configuration: map-underscore-to-camel-case: false

  4. python包管理历史

    1.标准库工具distutils,2000年发布,是包安装和发布工具 setup.python 程序,利用distutils 开发 示例: python setup.py install 安装一个包 ...

  5. CentOS7编译安装httpd-2.4.41

    安装参考环境: CentOS Linux release 7.5.1804 (Core) 一.安装依赖包 httpd安装的依赖包 # yum -y install pcre-devel # yum - ...

  6. jquery 单选框 radio是否选择问题

    业务需求是当用户勾选中的时候删除数据,取消勾选的时候数据取消 //单选事件,获取到每行数据ID $('.checkItem').change(function(){ // checkItem是给rad ...

  7. Linux centosVMware zabbix主动模式和被动模式、添加监控主机、添加自定义模板、处理图形中的乱码、自动发现

    一.主动模式和被动模式 主动或者被动是相对客户端来讲的 被动模式,服务端会主动连接客户端获取监控项目数据,客户端被动地接受连接,并把监控信息传递给服务端 主动模式,客户端会主动把监控数据汇报给服务端, ...

  8. Flask 教程 第二十三章：应用程序编程接口（API）

    本文翻译自The Flask Mega-Tutorial Part XXIII: Application Programming Interfaces (APIs) 我为此应用程序构建的所有功能都只适 ...

  9. UGUI 特效怎样在UI上裁剪

    刚好碰到有人问怎样把粒子特效放到 UI 上并且能正确被 Mask 裁剪, 首先想到给粒子效果的 Shader 添加模板模仿一般 UI 的模板方式, 应该就能正确裁剪了吧, 不过没那么简单, 我们看到在 ...

  10. Windows 网络显示监视器软件_spacedesk

    将各种设备拓展为 Windows 第二屏幕 官方网站 https://spacedesk.net/ 使用教程参阅: https://blog.csdn.net/sinat_21902709/artic ...