//需求：分别点击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. C++中的sort函数和⾃定义cmp函数

    写在最前面,本文摘录于柳神笔记: sort 函数在头⽂件 #include ⾥⾯,主要是对⼀个数组进⾏排序( int arr[] 数组或 者 vector 数组都⾏), vector 是容器,要⽤ v ...

  2. leetcode 0205

    目录 700 二叉搜索树中的搜索 175 组合两个表 仍旧不理解 left join 590. N叉树的后序遍历 递归: 迭代: 589 N叉树的前序遍历 递归, 注意 递归 过程中附带的 actio ...

  3. java 作业11.4

    package text3; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import ...

  4. shell脚本部署apache并能通过浏览器访问！

    第一步:导入httpd-2.2.17.tar包 第二步:创建一个test.sh文件(可在/root下) 第三步编写shell脚本 > 会重写文件,如果文件里面有内容会覆盖 >>这个是 ...

  5. 关于PGSQL连接问题

    今天把运维管理服务移植在Linux下测试,但又不想在Linux中安装PGSQL的服务器,就想让运维管理服务在虚拟机中连接windows的PG服务,却发现PG服务器一直拒绝连接,检查了网络端口之后都没问 ...

  6. php 基础知识 SESSION 和 COOKIE 的区别

    1,session 在服务器端,cookie 在客户端(浏览器)2,session 默认被存在在服务器的一个文件里(不是内存)3,session 的运行依赖 session id,而 session ...

  7. Android抓包分析-fiddler版

    本文介绍的是如何使用Fiddler工具抓取Android应用的HTTP协议的数据包 工具 Genymotion模拟器 笔记本电脑一台(Win7) Fiddler(v4.6.2),下载地址:http:/ ...

  8. 在IDEA中为SpringBoot配置热部署

    版本:IDEA Community 2019.2.2,Spring Boot  2.1.8.RELEASE 流程:pom文件中添加依赖: <dependency> <groupId& ...

  9. Windows驱动开发-DPC定时器

    DCP是一种使用更加灵活的定时器,可以对任意间隔时间进行定时.DPC定时器的内部使用了一个定时器对象KTIMER,当你设定了定时器之后,从设定开始起经过这个时间之后操作系统会将一个DPC定时器的例程插 ...

  10. 使用java实现二叉查找树的插入，修改和删除方法

    目前使用的是根据key的hashcode来进行排序,并且没有考虑hash碰撞的问题 package com.zhou.tree; import java.util.Comparator; import ...