随手用JQ写个选项卡
<div class="box">
<ul>
<li class="one">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="content">
<div class="ct">菜单1</div>
<div class="ct">菜单2</div>
<div class="ct">菜单3</div>
</div>
</div>
$(document).ready(function(){//jq入口
$('.ct:gt(0)').hide();//gt()选择器,选中索引后的全部 var tab = $('.box ul li');//定义是为了后面写的方便
tab.click(function(){//选项卡当然是基于点击的
$(this).addClass('one').siblings().removeClass('one');//选中的项,加一个选中的样式,兄弟删除该样式的类名 var tab_index = tab .index(this);//.index()定义选项卡的索引
$('.ct').eq(tab_index).show().siblings().hide();//把内容关联选项卡的索引,使内容随选项卡被点击而产生变化 || eq()选择器,选中该索引的项 });
});
别忘了引入jq
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
随手用JQ写个选项卡的更多相关文章
- 最近在用placeholder ,是已有的,网上也有不少都是jq写的
其实除了支持placeholder 的浏览器,其他用js 或jq实现的都不叫placeholder 效果,只能算上是获取焦点,或失去焦点时的一个placeholder 没有出生时就已经存在效果 很多人 ...
- 随手用python写一个下载jdk源码爬虫
最近在研读jdk源码,网上找了下资源,发现都不完整. 后来新发现了一个有完整源码的地方,主要包括了java,c,c++的东西,装逼需要,就想拿来玩玩.但是,找了好多种下载打开的方式,发现都不对.于是, ...
- 随手用Java写的bilibili缓存视频转换器(合成分离的视频和音频)
使用java随手写成,有需要可以自行修改. 项目使用到了fastjson,可以自行替换成其他json解析工具. 写这个的原因是因为下载到的其他工具弄出来的视频标题过长(应该取entry.json中的s ...
- JQ写法和js写法 方法函数化
<script> $(function () { $('#head').click=function () { alert($(this).html()) } }) </script ...
- JQ写简单的伸缩菜单(内附效果图和源代码)
效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 原生js,从面向过程的方法到面向对象的方法,写个选项卡练练手
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jq写个联级菜单
这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul' ...
- jq写无缝轮播
今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 ...
- 随手记录---jq如何判断当前元素是第几个元素
主要自己总是不记得 结构如下,涉及jq中获取当前元素是父元素的的第几个元素,jq中获取某类在同类元素中占第几,each方法 <div class="parent"> & ...
随机推荐
- 前端跨域(一):CORS
上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...
- Spring+Mybatis+SpringMVC+Maven+MySql搭建实例(转)
http://blog.csdn.net/evankaka/article/details/48785513?spm=5176.100239.blogcont28591.10.9Fdj9R
- Matlab 如何/怎样 读取图片 显示图片 转换成灰度图
% 读取图片 im = imread('路径') >> im = imread('ny.png'); % 显示图片 imshow(im) >> imshow(im) % 转换成 ...
- Python学习笔记,day3
Python学习第三天 一.集合 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 常用操作: s = ...
- 炒鸡讨厌换python版本呀
https://www.cnblogs.com/yjlch1016/p/8641910.html 还是说,装个 Anaconda,你好我好大家好. https://blog.csdn.net/qq_3 ...
- [C]排序并插入
/* 编写程序,在主函数中定义一个有10个元素的整型一维数组,用户输入9个数据,调用函数,对数组元素进行从小到大排序后,在函数中输入一个数,插入到数组中正确的位置,并输出. */ #include&l ...
- 21. Wireless tools (无线工具 5个)
AircrackKismetNetStumblerinSSIDerKisMAC
- day02格式化输出等
1.格式化输出 format % 占位符 %s:str, %d: dight, %f: float 字符串多行用三个单引号或三个双引号 %%5,百分之五,转义字符%.想 ...
- spring 事务传播机制
spring 事务 传播机制 描述的 事务方法直接相互调用,父子事物开启,挂起,回滚 等的处理方式. 绿色的 那几个 我认为比较重要. 1 , @Transactional(propagation=P ...
- spring事务详解(三)源码详解
系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高 一.引子 ...