<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写个选项卡的更多相关文章

  1. 最近在用placeholder ,是已有的,网上也有不少都是jq写的

    其实除了支持placeholder 的浏览器,其他用js 或jq实现的都不叫placeholder 效果,只能算上是获取焦点,或失去焦点时的一个placeholder 没有出生时就已经存在效果 很多人 ...

  2. 随手用python写一个下载jdk源码爬虫

    最近在研读jdk源码,网上找了下资源,发现都不完整. 后来新发现了一个有完整源码的地方,主要包括了java,c,c++的东西,装逼需要,就想拿来玩玩.但是,找了好多种下载打开的方式,发现都不对.于是, ...

  3. 随手用Java写的bilibili缓存视频转换器(合成分离的视频和音频)

    使用java随手写成,有需要可以自行修改. 项目使用到了fastjson,可以自行替换成其他json解析工具. 写这个的原因是因为下载到的其他工具弄出来的视频标题过长(应该取entry.json中的s ...

  4. JQ写法和js写法 方法函数化

    <script> $(function () { $('#head').click=function () { alert($(this).html()) } }) </script ...

  5. JQ写简单的伸缩菜单(内附效果图和源代码)

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. 原生js,从面向过程的方法到面向对象的方法,写个选项卡练练手

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Jq写个联级菜单

    这个效果很好看,Jq很容易实现: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul' ...

  8. jq写无缝轮播

    今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 ...

  9. 随手记录---jq如何判断当前元素是第几个元素

    主要自己总是不记得 结构如下,涉及jq中获取当前元素是父元素的的第几个元素,jq中获取某类在同类元素中占第几,each方法 <div class="parent"> & ...

随机推荐

  1. InstallShield 软件打包完整教程(含添加自定义依赖环境)

    任务说明:公司一个绿色版的软件,为安装部署是需要很多的环境依赖,如 DevExpress..net4.5.WinRAR等,客户提出安装复杂,并且有漏装后无法启动等情况,现将绿色版转安装版,并将依赖环境 ...

  2. Django_ORM字段_字段参数

    Object Relational Mapping (ORM) ORM:对象关系映射模式是一种为解决面向对象与关系数据库存在的互补匹配的现象技术.简单说就是通过使用描述对象和数据库之间的映射的元数据, ...

  3. 随笔:关于Class.getSimpleName()

    最近学习过程中,遇到了Class.getSimpleName()这个方法,就搜索了一些资料: API定义: Class.getName():以String的形式,返回Class对象的"实体& ...

  4. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  5. pychrom 快捷键

    1.pycharm使多行代码同时缩进 鼠标选中多行代码后,按下Tab键,一次缩进四个字符 2.pycharm使多行代码同时左移 鼠标选中多行代码后,同时按住shift+Tab键,一次左移四个字符 1. ...

  6. hello1 hello2 服务器安装加部署全过程

    1.安装maven和glassfish及配置环境变 首先搜索并下载maven3.6.0和glassfish4.1.1(版本看按需要选择). 点击安装包进行安装 安装完成后开始配置环境变量 打开系统环境 ...

  7. 常识判断-科技-day123

    PS: 在常识中科技是最难的 PS: 20-2w  HZ是人能听到的频率 PS: 物体的熔点和凝固点是一致的 PS: 氮肥如果多了,可能只是长叶子不结果: 磷肥促进开花结果 PS; 病毒是介于生物和非 ...

  8. HI3518EV200+AR0130开发板烧录uboot、kernel、rootfs及其参数配置

    分区名 分区大小 起始地址 截至地址bootloader:1M 0x00000000 0x00100000kernel: 3M 0x00100000 0x00400000rootfs: 12M 0x0 ...

  9. docker nginx letsencrypt

    https越来越流行了,但免费的证书一般是一年有效期.一般是够用了,但懒人都想一劳永逸, 有个免费证书颁发机构是letsencrypt.它是开源,并且完全免费的,它颁发的证书已经被几乎所有的浏览器所认 ...

  10. k8s之Hello World(四)

    实例:Guestbook留言板系统将通过Pod.RC.Service等资源对象搭建完成,成功启动后在网页中显示一条“Hello World”留言.其系统架构是一个基于PHP+Redis的分布式Web应 ...