var $ranklist_li = $("div.ranklist_model ul li");
$ranklist_li.hover(function () {
$(this).addClass("current").siblings().removeClass("current");
var index = $ranklist_li.index(this); //获取当前点击li元素在所有li元素中的索引
$("div.tab_box > div").eq(index).show().siblings().hide();
}); var $list_li = $(".m_list li");
$list_li.hover(function () {
$(this).addClass("eat_me").removeClass("drink_me").siblings().removeClass("eat_me").addClass("drink_me");
});

记录一下。方便之后查看

伸缩--也可用于tabs的更多相关文章

  1. 【转】Flexbox——快速布局神器

    原文转自:http://www.w3cplus.com/css3/flexbox-basics.html 简介 在很多方面HTML和CSS是一个强大的内容发布机制——易学.灵活和强大.但复杂的布局是他 ...

  2. Deis logo 开源PaaS系统 Deis

    Deis 是一个 Django/Celery API 服务器.Python CLI 和一组 Chef cookbooks 合并起来提供一个类似 Heroku 的应用平台,用于公有云和私有云.Deis ...

  3. Flexbox——快速布局神器

    Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行: 可以快速让他们布局在一列: 可以方便让他们对齐容器的左.右 ...

  4. flexbox的术语

    在详细阅读这篇文章之前,我们很有必要先了解flexbox的几个常用术语,这样有助于大家对后文的理解. 伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素 ...

  5. Flexbox布局详解

    弹性框布局 (flexbox) 添加了级联样式表级别 2 修订版 1 (CSS2.1) 中定义的四个基本布局模式:块布局.内联布局.表格布局和定位布局.使用弹性框布局功能,你可以更加轻松地设计复杂网页 ...

  6. [转载]你所不了解的DevOps

    DevOps开发运维训练营 一旦建立了创新的文化,即使那些并非科学家或者工程师的人——诗人.演员.记者——也能以团体的形式,接受科学文化的意义.他们信奉创新文化的概念.他们以促进这种文化的方式投票.他 ...

  7. 云计算时代,你所不了解的 DevOps

    在本文中,我们讨论如何快速地从更高的层面理解DevOps,介绍准备改变文化的最佳实践.我们将讨论DevOps的目标以及从组织管理层得到支持的方法,为DevOps的概念打下基础.我们将试着从根本上介绍使 ...

  8. Spring Security 5.0.x 参考手册 【翻译自官方GIT-2018.06.12】

    源码请移步至:https://github.com/aquariuspj/spring-security/tree/translator/docs/manual/src/docs/asciidoc 版 ...

  9. jquery.UI.tabs

    今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...

随机推荐

  1. 在vue组件中style scoped中遇到的坑

    在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...

  2. 洛谷P1494 [国家集训队]小Z的袜子

    Code: #include<cstdio> #include<iostream> #include<algorithm> #include<cstring& ...

  3. centos 7.1安装frees witch

    http://blog.sina.com.cn/s/blog_539d6e0c0102zgvm.html

  4. 使用Jmeter工具对http接口进行压力测试

    1.访问apache官网下载Jmeter工具 地址:https://jmeter.apache.org/download_jmeter.cgi 2.解压压缩包后运行bin目录下jmeter.bat启动 ...

  5. Obfuscating computer code to prevent an attack

    A method and system for obfuscating computer code of a program to protect it from the adverse effect ...

  6. Qt之QToolButton

    简述 QToolButton类提供了用于命令或选项可以快速访问的按钮,通常可以用在QToolBar里面. 工具按钮和普通的命令按钮不同,通常不显示文本,而显示图标. 简述 详细描述 常用接口 更多参考 ...

  7. Struts2学习(三)上传下载

    今天记录一下利用struts2实现上传下载,借此案例说明一下struts2的开发流程. 须要注意的是struts2版本号不同非常多地方的写法是不同的.本例使用struts2.3.15 .有差别的地方文 ...

  8. 简单编写makefile文件,实现GCC4.9编译项目,增加boost库測试等等。。

    一.须要用到的hw.cpp hw.h funtest.cpp funtest.h makefile 几个測试文件 1.hw.cpp代码例如以下: #include "hw.h" # ...

  9. YII进行数据查询及类库追踪

    一般处理过程: 模型进行数据操作,继承自CActiveRecord (活跃记录) AR数据库向上的封装.AR通过OOP面向对象方式操作数据库.AR须要终于转变为详细的sql语句.通过一个中间类(cri ...

  10. CSS透明度设置支持IE,Chrome,Firefox浏览器

    CSS文件里设置例如以下就可以 filter:alpha(opacity=60); //支持IE opacity:0.6; //支持Chrome.Firefox