//需求：分别点击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. ES-倒排索引

    一.什么事倒排索引 二.倒排索引为什么查询速度快 (1)ES全文检索的底层是使用倒排索引实现的 (2)倒排索引会将文档的内容进行关键词分词,可以使用关键词直接定位到文档的内容

  2. Python学习第二十一课——Mysql 对数据库的基本操作

    数据库操作(DDL) 在数据库下创建表(create_table) 创建表代码块: CREATE TABLE employee( id TINYINT PRIMARY KEY auto_increme ...

  3. 使用docker构建第一个spring boot项目

    在看了一些简单的docker命令之后 打算自己尝试整合一下docker+spring boot项目本文是自己使用docker+spring boot 发布一个项目1.docker介绍 docke是提供 ...

  4. techiediaries网站的Laravel 6系列教程

    Laravel 6 Tutorial & New Features - Build a CRM [PART 1] Laravel 6 REST API CRUD Tutorial - Buil ...

  5. BIND DNS配置！

    1.RPM 包的主要作用bind:提供了域名服务器的主要程序及相关文件bind-utils:提供了对 DNS 服务器的测试工具程序,如 nslookup 等bind-libs:提供了 bind.bin ...

  6. 第十六节：Linq用法大全(四)

    1. OfType 获取集合中中指定类型元素. , , , , , "aaa", "bbb" }; int max = obj.OfType<int> ...

  7. ES 创建mapping

    mapping的写入与查看首先创建一个索引: curl -XPUT "http://erp2.es.kd1.pagoda.com.cn:80/erp_stock_index"{&q ...

  8. MVC集合ModelBinder

    使用腳本提交集合类时,MVC binding public class FormExtensionValueProviderFactory : ValueProviderFactory { publi ...

  9. php 安装 swoole

    1.安装swoole cd /usr/local/src wget https://github.com/swoole/swoole-src/archive/v1.9.1-stable.tar.gz ...

  10. Python实现一个LRU

    class Node: key = None value = None pre = None next = None def __init__(self, key, value): self.key ...