随手用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"> & ...
随机推荐
- Elasticsearch CURL命令
1.查看集群状态 curl '10.18.37.223:9200/_cat/health?v'绿色表示一切正常, 黄色表示所有的数据可用但是部分副本还没有分配,红色表示部分数据因为某些原因不可用 2. ...
- python 9
一.常识 在制作统计表时,要创建一个listname_list,来存放列明,这样以后进行列明删减的更新时,比较方便. 二.函数的初识 代码遇到def就跳过,把函数内容放到内存中,遇到函数名再来执行函数 ...
- 20175120彭宇辰 《Java程序设计》第七周学习总结
#教材内容总结 第八章 常用实用类 一.String类 String类用来处理字符序列,在java.lang包中,程序可以直接使用String类.需要注意的是Java把String类声明为final类 ...
- shiro验证(转)
http://blog.csdn.net/tch918/article/details/13765799
- Spring Boot 定时任务使用
详情参考文章https://blog.csdn.net/qq_31001665/article/details/76408929
- springboot+mybatis-puls利用swagger构建api文档
项目开发常采用前后端分离的方式.前后端通过API进行交互,在Swagger UI中,前后端人员能够直观预览并且测试API,方便前后端人员同步开发. 在SpringBoot中集成swagger,步骤如下 ...
- Linux创建用户与权限赋值
1.设置文件的权限 1).解说: d:是英语directory的缩写,表示“目录”.就是说这是一个目录. l:是英语link的缩写,表示“链接”.就是说这是一个链接. b:块设备文件 c:字符设备 s ...
- 阿里云一 第一篇:云服务器ECS
阿里云(www.aliyun.com)创立于2009年,是全球领先的云计算及人工智能科技公司,为200多个国家和地区的企业.开发者和政府机构提供服务.截至2017年3月,阿里云付费云计算用户达87.4 ...
- L1-046 整除光棍
这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可以被13整除. 现在,你的程序 ...
- 可持久化trie学习笔记
其实很早之前就想学习可持久化trie,不过由于换队友等情况,还是优先去学数论和计算几何,今天突然心血来潮学了一发可持久化trie,感觉还是蛮简单的,不过由于自己很长时间没写过可持久化了,都快忘了是个什 ...