jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手
<style type="text/css">
*{margin:0; padding:0; font-size:12px;}
ul{list-style:none;}
ul li a{text-decoration:none; color:#000000;}
ul li a:hover{text-decoration:underline; color:#cc0000;}
#con{margin:50px auto; width:960px;}
.tab_Item{ border:1px solid #d8d9d9; width:348px;}
.tab_Tit{ background:url(images/bg.jpg) no-repeat scroll left top; height:30px;}
.tab_Tit h3{ float:left; background:url(images/icon.jpg) no-repeat scroll 0 0; font-weight:bold; margin:8px 0 0 8px; height:22px;font-size:14px;padding-left:12px; color:#333333;}
.tab_Tit a{float:left; display:block; padding-top:8px; width:56px; height:22px; border-left:1px solid #d8d9d9; text-align:center; cursor:pointer;}
.tab_Tit a:hover{ background:#fff;text-decoration:underline; color:#cc0000;}
.tab_Tit .selected{ background:#fff;}
.tab_Con{background:url(images/bg.jpg) no-repeat scroll 0 -30px; margin:6px 0 0 8px; padding-left:22px; }
.tab_Con ul{line-height:24px;}
</style>
<div class="tab_Item">
<div class="tab_Tit">
<h3>文章排行</h3>
<a class="">333</a>
<a class="">222</a>
<a class="selected">111</a>
</div>
<div class="tab_Con">
<ul style="display:none">
<li>
<a title="北上广之外的IT技术人生" target="_blank" href="#">33333333333333</a>
</li>
</ul>
<ul style="display:none">
<li>
<a title="给明年依然年轻的我们:道别150万年薪,开始盒饭生活" target="_blank" href="#">222222222222222</a>
</li>
</ul>
<ul style="display:block">
<li>
<a title=""菜鸟"程序员和"大神"程序员差距在哪里" target="_blank" href="#">111111111111</a>
</li>
</ul>
</div>
</div>
$(function(){
$(".tab_Tit a").each(function(index){ //遍历 a 标签 给了 index 参数(索引)
$(this).mouseover(function(){ //移动到上边
$(".tab_Tit a.selected").removeClass("selected"); //移除这个class
$(this).addClass("selected"); //加上这个class
$(".tab_Con > ul:visible").hide(); //所有可见的 ul 都隐藏
$(".tab_Con ul:eq(" + index + ")").show(); //eq 遍历 ul 根据 .tab_Tit a 的索引显示
})
})
})
jquery写的tab切换效果 非常简单的更多相关文章
- jquery时间轴tab切换效果实现结合swiper实现滑动显示效果
需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- jquery另外一种类似tab切换效果
简要:最近做项目一些效果不能用淘宝kissy框架 所以代码得自己写啊 网上当然有很多组件 但是用他们的代码很多(有的是我不需要的代码) 且还要看API 还不如自己动手写个简单一个,是这么一种简单的效果 ...
- Tab切换效果(修改)
前几天我写了这个切换效果,但是是只传一个值的函数,经过各位大牛的指点发现还是有些问题的,于是经过我不懈的努力,完善了代码: 传递多个参数替代函数里面包含事件这个问题: html代码: <div ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- 又一Tab切换效果(js实现)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
随机推荐
- UVA 1153 KEEP THE CUSTOMER SATISFIED
题意: 钢铁公司有N个客户的订单,每个订单有一个产量q(生产时间刚好也等于q)和订单完成截止时间.公司要求完成尽量多的订单. 分析: 先按截止时间d排序,然后维护一个已经选好的订单的优先队列,如果当前 ...
- oracle中set define off
set define off关闭替代变量功能 在SQL*Plus中默认的"&"表示替代变量,也就是说,只要在命令中出现该符号,SQL*Plus就会要你输入替代值.这就意味着 ...
- C# 2 运算符 if
运算符: 一.算术运算符: + - * / % ——取余运算 取余运算的应用场景: 1.奇偶数的区分. 2.把数变化到某个范围之内.——彩票生成. 3.判断能否整除.——闰年.平年. int a = ...
- CodeBlocks13.12汉化以及去掉注释及字符串的下划线
汉化: 在安装目录 D:\Program Files\CodeBlocks\share\CodeBlocks(我的安装目录)下,新建文件夹locale,然后在locale文件夹内建立文件夹zh_CN ...
- 获取ajax对象
function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest ...
- android 应用开发对大图片的处理
一,下载 android下载大图片(例如微博长图片)会出现OOM down掉问题 解决这个问题的办法是下载图片时先得到图片的宽度和高度,如果超出规定限制则对图片进行缩放 关键参数 1. BitmapF ...
- javascript 数据结构和算法读书笔记 > 第一章 javascript的编程环境和模型
1.变量的声明和初始化 必须使用关键字 var,后跟变量名,后面还可以跟一个赋值表达式. var name; var age = 5; var str = 'hello'; var flg = fal ...
- web安全记录
前端 CSRF 跨站请求伪造 客户端添加伪随机数,后台验证 验证码 中间人攻击 SSL证书加密 xss(跨站脚本攻击)漏洞,微软的字符检验(自动) 文本展示编码处理 做标签展示的文本尤其过滤脚本 Co ...
- js题
function newStr(){ return "hi";}function turn(str){ str.toString = newStr;}var str1 = &quo ...
- CGFloat,CGPoint,CGSize,CGRect
1.数据类型: CGFloat: 浮点值的基本类型 CGPoint: 表示一个二维坐标系中的点 CGSize: 表示一个矩形的宽度和高度 CGRect: 表示一个矩形的位置和大小 typedef fl ...