伸缩--也可用于tabs
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的更多相关文章
- 【转】Flexbox——快速布局神器
原文转自:http://www.w3cplus.com/css3/flexbox-basics.html 简介 在很多方面HTML和CSS是一个强大的内容发布机制——易学.灵活和强大.但复杂的布局是他 ...
- Deis logo 开源PaaS系统 Deis
Deis 是一个 Django/Celery API 服务器.Python CLI 和一组 Chef cookbooks 合并起来提供一个类似 Heroku 的应用平台,用于公有云和私有云.Deis ...
- Flexbox——快速布局神器
Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行: 可以快速让他们布局在一列: 可以方便让他们对齐容器的左.右 ...
- flexbox的术语
在详细阅读这篇文章之前,我们很有必要先了解flexbox的几个常用术语,这样有助于大家对后文的理解. 伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素 ...
- Flexbox布局详解
弹性框布局 (flexbox) 添加了级联样式表级别 2 修订版 1 (CSS2.1) 中定义的四个基本布局模式:块布局.内联布局.表格布局和定位布局.使用弹性框布局功能,你可以更加轻松地设计复杂网页 ...
- [转载]你所不了解的DevOps
DevOps开发运维训练营 一旦建立了创新的文化,即使那些并非科学家或者工程师的人——诗人.演员.记者——也能以团体的形式,接受科学文化的意义.他们信奉创新文化的概念.他们以促进这种文化的方式投票.他 ...
- 云计算时代,你所不了解的 DevOps
在本文中,我们讨论如何快速地从更高的层面理解DevOps,介绍准备改变文化的最佳实践.我们将讨论DevOps的目标以及从组织管理层得到支持的方法,为DevOps的概念打下基础.我们将试着从根本上介绍使 ...
- Spring Security 5.0.x 参考手册 【翻译自官方GIT-2018.06.12】
源码请移步至:https://github.com/aquariuspj/spring-security/tree/translator/docs/manual/src/docs/asciidoc 版 ...
- jquery.UI.tabs
今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...
随机推荐
- AJAX和JSON实际应用
实现功能:登录验证 一.因为我是在SpringMVC框架上写的,首先得添加依赖: <dependencies> <!-- 用来测试的依赖 --> <dependency& ...
- vue 事件上加阻止冒泡 阻止默认事件
重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...
- OpenJDK源码研究笔记(二)-Comparable和Comparator2个接口的作用和区别(一道经典的Java笔试面试题)
Comparable和Comparator是JDK中定义的2个比较接口,很相似,但又有所不同. 这2个接口的作用和区别也是Java中的常见经典面试题. 下面我们就来详细介绍下这2个接口的定义.作用.区 ...
- C语言编译和链接
编译链接是使用高级语言编程所必须的操作,一个源程序只有经过编译.链接操作以后才可以变成计算机可以理解并执行的二进制可执行文件. 编译是指根据用户写的源程序代码,经过词法和语法分析,将高级语言编写的代码 ...
- grep的使用【转】
grep的作用是显示匹配一个或多个模式的文本行.时常会作为管道(|)的第一步,以便对匹配的数据作进一步处理.grep常用于查找和替换文本的.在传统上,grep有3个版本:grep.egrep(扩展gr ...
- 小贝_mysql select5种子句介绍
mysql select5种子句介绍 简要 一.五种字句 二.具体解释五种字句 一.五种字句 where.group by.having.order by.limit 二.具体解释五种字句 2.1.理 ...
- MySQl Study学习之--MySQl二进制日志管理
MySQl Study学习之--MySQl二进制日志管理 MySQL二进制日志(Binary Log) a.它包括的内容及作用例如以下: 包括了全部更新了数据或者已经潜在更新了数据(比方没 ...
- 关于MAVEN找不到JDK的那点事
自从SUN被Oracle收购以后.JDK就由Oracle来提供了. 在新版本号之中,假设你下载安装JDK以后,又选择了JRE安装(当然,如今JRE直接叫做Java了),那么,恭喜你,在 C:\wind ...
- thinkphp5项目--个人博客(五)
thinkphp5项目--个人博客(五) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...
- rest_framework_HyperlinkedIdentityField
#生成链接 HyperlinkedIdentityField class UserInfoSerializer(serializers.ModelSerializer): group = serial ...