html部分

  1. <ul class="tab">
  2. <li>最新</li>
  3. <li class="cur">热门</li>
  4. <li>新闻</li>
  5. </ul>
  6. <div>11</div>
  7. <div class="on">22</div>
  8. <div>33</div>

css部分

  1. <style type="text/css">
  2. div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;}
  3. .tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;}
  4. .tab li{float:left;width:60px;height:30px;background:#ccc;color:#fff;border:1px solid red; text-align:center;line-height:30px;cursor:poi nter; }
  5. .on{display:block;}
  6. .tab li.cur{background:blue;}
  7. </style>

jquery部分

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $(".tab li").click(function(){
  4. $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
  5. $("div").eq($(".tab li").index(this)).toggle().siblings("div").hide();
  6. )};
  7. )};
  8. </script>

实现的效果大概就是每次点击一下的时候是正常选项卡,每个选项卡第二次点击的时候会隐藏当前部分;

简单的jquery选项卡效果的更多相关文章

  1. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  2. jquery简单实现tab选项卡效果

    html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...

  3. javascript与jQuery选项卡效果

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  4. jquery选项卡效果

    效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  6. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  7. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  8. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  9. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

随机推荐

  1. Python 小爬虫流程总结

    接触Python3一个月了,在此分享一下知识点,也算是温故而知新了. 接触python之前是做前端的.一直希望接触面能深一点.因工作需求开始学python,几乎做的都是爬虫..第一个demo就是爬取X ...

  2. Best code水题之路

    BestCoder 2nd Anniversary: 1001.Oracle There is once a king and queen, rulers of an unnamed city, wh ...

  3. JDBC、DAO

    JDBC是Java数据库连接技术的简称,提供连接各种常用数据库的能力 JDBC的工作原理 JDBC 驱动器由数据库厂商提供 1.在个人开发与测试中,可以使用JDBC-ODBC桥连方式 2.在生产型开发 ...

  4. Qt在ui中使用代码添加新的控件

    QLabel* label = new QLabel(ui->centralWidget);

  5. 【笔记】js操作cookie

    $.cookie('the_cookie'); // 读取 cookie            $.cookie('the_cookie', 'the_value', { expires: 7 }); ...

  6. [LeetCode] Find the Difference

    Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...

  7. WCF 学习篇

    写在前面 自从运用了.NET Remoting 之后,就想系统的学习下WCF,因为WCF是对现有分布式通信技术的整合.主要以 <WCF全面解析> 这本书为主,园子的资料和网上资料为辅,来学 ...

  8. shell(一)

    #服务器之间拷贝数据 scp  -r   本地文件目录    系统用户名@IP:目标文件夹路径

  9. web.xml文件加载顺序

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

  10. Tomat简介

    Tomcat目录结构bin: 存放各种平台下启动和关闭Tomcat的脚本文件.startup.bat是windows下启动tomcat的文件,shutdown.bat是关闭tomcat的文件.comm ...