<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. temporal credit assignment in reinforcement learning 【强化学习 经典论文】

    Sutton 出版论文的主页: http://incompleteideas.net/publications.html Phd  论文:   temporal credit assignment i ...

  2. 手动清除mac的广告弹框病毒 MacOSDefender

    最近在浏览亚马逊, 京东的时候, 发现会自动弹出很多广告到浏览器, 其实是中了病毒MacOSDefender. 这个病毒非常烦人, 会在你浏览电商网页的时候拼命的打开广告页面, 而且还会弹出一些提示, ...

  3. modelSIM仿真ROM核报错

    用Quartus Prime 15.1调用modelSIM进行RTL仿真,modelSIM的transcript框框总是有Failed to Open Readmem File提示. 错误原因:IP核 ...

  4. Git入门(安装及基础命令行操作)

    一.安装 1.Mac 在Mac中安装Git的方法不止一种.最简单的要数通过Xcode命令行工具.对于Mavericks(10.9)或更高版本的操作系统,当你第一次尝试在终端执行git命令时,系统会自动 ...

  5. JAVA日常之三

    一.Main方法的args参数 args[] 是程序运行前可传入的参数,比如 java HelloWorld a,那么在HelloWorld的main方法里面 args就是{"a" ...

  6. SQLI DUMB SERIES-21

    Cookie Injection- Error Based- complex - string ( 基于错误的复杂的字符型Cookie注入) (1)登录成功后有以下页面: 其中红圈内的字符为admin ...

  7. 修改oracle数据库内存报错

    今天修改oracle数据库内存时, alter system set memory_max_target=10240M scope=spfile;语句正确修改:但重启时却报错 : SQL> al ...

  8. 数据库中无数据时查询数据为空,但出现空指针异常的解决方案(转载https://blueskator.iteye.com/blog/2096026)

    异常:java.lang.NullPointerException 解决方案: try{ hotelImageList = ihotelImgManager.query(hiqc); }catch(E ...

  9. window.location各属性的值

    window.location各属性的值 window.location.href            "https://i.cnblogs.com/EditPosts.aspx?opt= ...

  10. js 数字随机滚动(数字递增) 每日凌晨回到原点,重新计算

    html: <div class="textMon"> <!--<img src="./img/20180830160315.png" ...