Tab 切换效果
今天写的两个小效果都是为了测试我写的单参函数,结果还是有点成功的~~此处是不是想发表情包!
Tab效果很简单,这里我就不赘述了,直接上代码:
html代码:
<div class="content">
<div class="tab1 cf">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</div>
<div class="tab2 cf">
<div>1111第一项内容</div>
<div>2222第二项内容</div>
<div>3333第三项内容</div>
</div>
</div>
css代码:
.tab1 li{
float: left;
width: 98px;
border:1px solid #f00;
display: inline-block;
height: 50px;
}
.tab2 div{
border:1px solid #f00;
width: 300px;
height: 100px;
}
js代码:
function tabSwitch(tab){
var tabBox=tab;
var tab1Li=tabBox.find(".tab1 li");
var tab2Div=tabBox.find(".tab2 div");
tab2Div.hide();
tabBox.find(".tab1 li:first-child").css("background","#FABB3E");
tabBox.find(".tab2 div:first-child").show();
tab1Li.click(function(){
var index=$(this).index();
$(this).css("background","#FABB3E").siblings().css("background","#fff");
tab2Div.eq(index).show().siblings().hide();
});
return false;
}
tabSwitch($(".content"));//调用tabSwitch函数
好啦,这个就可以多次调用啦~
效果图!!
这么丑大家就不要欣赏了,这个博文也主要不是突出样式的,大家可以根据自己喜欢去改css就好啦!
Tab 切换效果的更多相关文章
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
- jquery另外一种类似tab切换效果
简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...
- vue2.0使用动态组件实现tab切换效果(vue-cli)
<template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)
一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- 又一Tab切换效果(js实现)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 07springMVC视图解析器
u 概述 u 常见视图解析器 u UrlBasedViewResolver u InternalResourceViewResolver u 视图解析器链 u 说明 1 概述 在 ...
- 0613pt-query-digest分析慢查询日志
转自http://www.jb51.net/article/107698.htm 这篇文章主要介绍了关于MySQL慢查询之pt-query-digest分析慢查询日志的相关资料,文中介绍的非常详细,对 ...
- Wireshark中的一些SNMP相关的过滤器
Wireshark中的一些SNMP相关的过滤器 转自 http://linmingren2003.blog.163.com/blog/static/567510032011419825097/ 由 ...
- 用 Python 理解 Web 并发模型
用 Python 理解 Web 并发模型 http://www.jianshu.com/users/1b1fde012122/latest_articles 来源:MountainKing 链接: ...
- error at ::0 can't find referenced pointcut...解决方法
error at ::0 can't find referenced pointcut...解决方法 学习了:http://dyldragon.iteye.com/blog/512612 升级aspe ...
- 允许远程访问MySQL的设置
允许远程访问MySQL的设置 学习了:http://www.cnblogs.com/hyzhou/archive/2011/12/06/2278236.html Windows版本有workbench ...
- MySQL出现Ignoring query to other database的问题
今天使用mysql的时候,输入随意一条命令都会出: Ignoring query to other database 这条错误信息,非常是奇怪. 后来才发现是登录数据库时.少了个-u的參数.. 正确的 ...
- GIS中mybatis_CMEU的配置方法
基本常用功能预览: 生成实体类(可以自定义:get/set,有参无参构造方法,自定义类型与属性,序列化等); 生成dao层接口(查询全部信息,通过ID查询信息,插入全部属性,插入不为空的属性,通过ID ...
- 利用SQLite在android上实现增删改查
利用SQLite在android上实现增删改查 方法: 一.直接利用database.execSQL()方法输入完整sql语句进行操作 这种方法适用于复杂的sql语句,比如多表查询等等 这里适合于增删 ...
- 摘要提取算法——本质上就是pagerank,选择rank最高的句子作为摘要,如果结合word2vec应该有非常好的效果
最近需要做一些文本摘要的东西,选取了TextRank(论文参见<TextRank: Bringing Order into Texts>)作为对比方案,该方案可以很方便的使用Python相 ...