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. int ,long , long long类型的范围

    int ,long , long long类型的范围 unsigned - - unsigned - - unsigned __int64的最大值: __int64的最小值:- unsigned __ ...

  2. HttpUtil

    1.发送doPost请求,在web那边使用request.setCharacterEncoding("UTF-8");保证中文不乱码,不需要第三方jar包 public stati ...

  3. CentOS 安装Paramiko模块

    转自:http://www.cnblogs.com/hyli/p/3910585.html 1.下载安装包: https://pypi.python.org/packages/source/p/par ...

  4. win7下cmd常用命令

    当在win7下执行命令出现右图状况 状况下可以采用鼠标放在指定的文件夹然后按shilt+鼠标右键可以出现下图的界面直接在此处打开cmd

  5. 忘记Windows7登陆密码解决办法

    忘记 Windows7 的登陆密码,解决这个问题的思路就是替换 system32 下的 Magnify.exe . 可以从 WindowsPE 启动,到 C:\windows\system32 下. ...

  6. Docker Container 配置独立IP

    1.宿主机安装网桥工具包 要是Linux可以工作在网桥模式,必须安装网桥工具bridge-utils,运行命令: yum install bridge-utils

  7. xml之dom4j解析

    * 使用dom4j解析xml 实例在java520里面 TextDom4j * dom4j,是一个组织,针对xml解析,提供解析器dom4j * dom4j不是javase的一部分,想要使用第一步需要 ...

  8. 数据库邮件服务器中sp_send_dbmail的参数使用

    sp_send_dbmail [ [ @profile_name = ] 'profile_name' ]     [ , [ @recipients = ] 'recipients [ ; n ]' ...

  9. EXT.JS的PROXY放在哪里,STORE放在哪里,绝对是个技术活儿啊。

    我理解的是,单独的STORE,会在应用程序开始时就加载, 而VIEWMODEL的STORE,会在VIEW加载时才开始加载. PROXY放在STORE,则会在调用这个STORE的VIEW才能请求服务器数 ...

  10. 解决Linux不能上网ping:unknown host的问题

    修改配置文件:/etc/sysconfig/network-scripts/ifcfg-eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 在里面添加 ...