//需求：分别点击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. java操作nginx

    一,判断程序的部署环境是nginx还是windows /** * 判断操作系统是不是windows * * @return true:是win false:是Linux */ public stati ...

  2. C语言-排序和查找

    一 冒泡排序:算法特点:两层循环外层控制排序的趟数,内存控制相邻元素两两比较的次数.n个数共需n-1趟,(i=1;i<n;i++)趟数=n-1-1+1,其中第j趟需要相邻元素两两比较的次数为n- ...

  3. SVN 锁定无法提交命令执行失败

    有个项目使用svn 高版本客户端作业,转换到低版本的环境下,出现锁定,命令执行失败. 使用cleanup 没有效果, 网上建议的svn无法Cleanup解决方法: Step1:到 sqlite官网 ( ...

  4. asp.net mvc Bundle

    在使用ASP.NET MVC4中使用BundleConfig 将 js css文件 合并压缩使用,但是文件名含有min及特殊字符的将不引用 ,也不提示其他信息.

  5. C++赋值操作符不能继承

    在网上搜索相关资料时,看到有人说,赋值操作符可以被继承,并且给出了一个例子. 一时间,也没想出那个例子错在哪里. 例子代码如下: #include <iostream> using nam ...

  6. centOS+DJango+mysql_nginx部署流程记录

    安装Python3.6.2: https://www.jianshu.com/p/7a76bcc401a1 安装MySQL: https://www.cnblogs.com/luohanguo/p/9 ...

  7. 【转载】使用阿里云code和git管理项目

    使用代码云托管和git来管理项目可以使多客户端和多人开发更加高效.通过对比github,bitbucket和国内一些云托管服务发现阿里云在项目空间和传输速度及稳定性上更能满足公司开发的要求.本文将介绍 ...

  8. Windows驱动开发-IRP超时处理

    IRP被送到底层驱动程序以后,由于硬件设备的问题,IRP不能得到及时处理,甚至有可能永远不会被处理,这时候需要对IRP超时情况进行处理,一旦在规定时间内,IRP没有被处理,操作系统就会进入到IRP的处 ...

  9. 第5节 Actor实战：1 - 6

    10.3.   Actor实战 10.3.1.    第一个例子 怎么实现actor并发编程: 1.定义一个class或者是object继承Actor特质,注意导包import scala.actor ...

  10. 「Violet」蒲公英

    「Violet」蒲公英 传送门 区间众数,强制在线. 分块经典题. 像这题一样预处理,然后就直接爆搞,复杂度 \(O(n \sqrt n)\) 参考代码: #include <algorithm ...