//需求：分别点击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语言补修的一些体会(1)

    在转入软件工程后,原来的C语言程序设计只有三学分,而信息学院的C语言程序设计有四学分.迫于无奈的我只能再补修一遍C语言,自我认为大一对于C语言的学习已经基本足够,但我发现信息学院用的是不一样的书后,对 ...

  2. JAVA接口测试类

    package etcom.servlet; import java.io.BufferedReader; import java.io.InputStreamReader; import java. ...

  3. vue项目中vant tab改变标签颜色

    找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...

  4. windows破解wifi小技巧

    1,首先使用手机某软件破解wifi,手机连上破解的wifi 2,在手机上打开下面界面 3,在电脑上使用二维码识别小工具扫描二维码 4,得到扫面结果 4,得到扫描结果 WIFI:T:WPA;S:DFZJ ...

  5. 导出EXCEL设置单元格格式

    怎么设置导出的EXCEL文件的列格式 如何设置导出的EXCEL文件的列格式在office的EXCEL中我们可以在一个EXCEL文件中,选中一列再点击鼠标右键,选择设置单元格格式,可以将这一列设为文本格 ...

  6. 从零构建以太坊（Ethereum）智能合约到项目实战——第23章 从零构建和部署去中心化投票App，decentralization Voting Dapp

    P90 .1-从零构建和部署去中心化投票App-01 P91 .2-从零构建和部署去中心化投票App-02 P92 .3-从零构建和部署去中心化投票App-03 参考博文:http://liyuech ...

  7. 夯实Java基础系列目录

    自进入大学以来,学习的编程语言从最初的C语言.C++,到后来的Java,. NET.而在学习编程语言的同时也逐渐决定了以后自己要学习的是哪一门语言(Java).到现在为止,学习Java语言也有很长一段 ...

  8. 3_07_MSSQL课程_Ado.Net_委托、事件

    委托和事件的区别? (1)委托是一个类. 事件是一个委托类型的实列. (2)委托可以在定义委托实列的类的外部触发执行.(不安全) 事件只能能在定义它的类的内部触发执行.(安全),类外部只能注册事件的响 ...

  9. C++11通过拷贝构造器拷贝const字段(待解决)

    问题梗概如标题所述. 在今天实现Token类的时候,遇到的问题. 我希望将Token类设定为immutable属性的,这样实现的方式是将这个类内的所有字段均设置为const型,同时每个字段均为publ ...

  10. vs code 本地调试配置

    { "name": "使用本机 Chrome 调试", "type": "chrome", "request& ...