jquery简单实现tab选项卡效果
2024-08-30 22:05:46
html:
<ul class="tab">
<li>最新</li>
<li class="cur">热门</li>
<li>新闻</li>
</ul>
<div>11</div>
<div class="on">22</div>
<div>33</div>
css:
div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;}
.tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;}
.tab li{float:left;width:60px;height:30px;background:#ccc;color:#fff;border:1px solid red; text-align:center;line-height:30px;cursor:pointer; }
.on{display:block;}
.tab li.cur{background:blue;}
js:
$(document).ready(function(){
$(".tab li").click(function(){
$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$("div").hide().eq($(this).index()).show();
//另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on'); });
});
来源:http://www.cnblogs.com/web-xiaobai/archive/2012/09/17/2689067.html
最新文章
- mac新手的烦恼
- javascript - 享元模式
- 微信支付报错:Invalid thumbnail dimensions: 0x0
- Firefox 插件 FlashGot 创建 Axel 下载任务
- codevs 1215 迷宫
- HTTP请求响应对照表
- C语言实现二叉树-04版
- DNS报文格式
- 解决Inno Setup制作安装包无法创建桌面快捷方式的问题
- HTML练习----注册界面
- 你应该知道的2016年有关App开发的技术创新
- 解决QT Creator在Linux下的输入法问题
- STL迭代器与部分算法学习笔记
- Canvas globalCompositeOperation API
- iOS安全攻防之使用 Frida 绕过越狱设备检测
- (转)Spark JAVA RDD API
- Django----中间件详解
- Python 学习之路3
- css 计算属性 calc的使用
- String类的intern()方法
热门文章
- Java 树结构实际应用 一(堆排序2秒排完800w数据)
- hdu 4622 (hash+“map”)
- P1223_排队接水(JAVA语言)
- NameError: name &#39;foo&#39; is not defined Python常见错误
- [游记]2020/CSP - S总结
- Markdown部分用法总结
- OOUnit2Summary
- OO_Unit1_表达式求导总结
- ES系列(二):基于多播的集群发现实现原理解析
- Java(215-231)【Object类、常用API】