参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动

效果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
    body{
        font-size: 13px;
    }
    ul,li{
        margin: 0;padding: 0;
        list-style: none;
    }
    #menu li{
        text-align: center;
        float: left;
        padding: 5px;
        margin-right: 2px;
        width: 50px;
        cursor: pointer;
    }
    #menu li.tabFocus{
        width: 50px;
        font-weight: bold;
        background-color: #f3f2e7;
        border: solid 1px #666;
        border-bottom: 0;
        z-index: 100;
        position: relative;
    }
    #content{
        width: 260px;
        height: 80px;
        padding: 10px;background-color: #f3f2e7;
        clear: left;
        border: solid 1px #666;
        position: relative;
        top: -1px;
    }
    #content li{
        display: none;
    }
    #content li.conFocus{
        display:block;
    }
      
  
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
    $(function(){
        $("#menu li").each(function(index) {//遍历选项卡
            $(this).click(function() {//注册每个选项卡点击事件
                $("#menu li.tabFocus").removeClass('tabFocus');
                $(this).addClass('tabFocus');//增加当前选中项样式
                //显示选项卡对应的内容并影藏不被选中的内容
                $("#content li:eq("+index+")").show().siblings().hide();
            });
        });
  
  
    });
</script>
<title>jQuery实现选项卡</title>
</head>
<body>
    <ul id="menu">
        <li class="tabFocus">家居</li>
        <li>电器</li>
        <li>二手</li>
    </ul>
    <ul id="content">
        <li class="tabFocus">家居内容</li>
        <li>电器内容</li>
        <li>二手内容</li>
    </ul>
</body>
</html>

jQuery实现点击式选项卡的更多相关文章

  1. CSS鼠标点击式变化图片透明度

    今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...

  2. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  4. JQuery事件的链式写法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  6. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  7. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  8. 在visual studio中设置点击左边选项卡中的类文件,右侧解决方案跳到对应的文件

    在visual studio中如何设置点击左边选项卡中的类文件,右侧解决方案跳到对应的文件?比如说,VS上方的选项卡文件较多,我点击选项卡上的任一文件,解决方案中对应的文件突出显示           ...

  9. jquery绑定点击事件的三种写法

    一.用jquery动态绑定点击事件的写法 部分代码: <script type="text/javascript"> $(document).ready(functio ...

随机推荐

  1. 设置eclipse编码格式

    1.修改eclipse默认工作空间编码方式.点击Window-->Preferences-->General-->Workspace,设置编码格式为UTF-8,然后点击OK.

  2. Phoenix编译支持CDH

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl/p/6898227.html 转载请注明出处 最近由于想调研下低延迟的数据查询框架,那么基于SQL on Hba ...

  3. servlet的总结

    tomcat在启动的时候 加载webapp下面的web.xml,加载里面定义的servlet. web.xml文件有两部分:servlet类定义和servlet映射定义每个被载入的servlet类都有 ...

  4. 机器学习与R语言：NB

    #---------------------------------------- # 功能描述:演示NB建模过程 # 数据集:SMS文本信息 # tm包:维也纳财经大学提供 #----------- ...

  5. JS变量比较陷阱

    我们觉得JS简单是因为它是弱类型的语言,不像java那样对对类型那样敏感,但js也有其不尽人意的地方. 在java中我们无法将数字与字符串直接比较,而js能,而且能直接转换成数值比较,但是如果是字符串 ...

  6. bzoj 3450: Tyvj1952 Easy

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 411  Solved: 309[Submit][Status][Discuss] Descriptio ...

  7. Linux内核分析方法谈

    本文来自 http://blog.csdn.net/ouyang_linux007/article/details/7422346 Linux的最大的好处之一就是它的源码公开.同时,公开的核心源码也吸 ...

  8. 浅谈const限定符

    什么是const限定符? Const限定符是我们通常所说的常量限定符,被const修饰的对象具有常量性质,只能读,不能写. 为什么使用const限定符? 用const变量取代“魔数”,代码更容易理解和 ...

  9. SonarQube介绍及部署

    SonarQube介绍及部署 编写人:罗旭成 编写时间:2014-5-28 SonarQube简介 SonarQube是一个用于代码质量管理的开源平台(Java开发),用于管理源代码的质量,可以从七个 ...

  10. Outlook 配置qq邮箱账号

    最近想用Outlook 2013管理QQ邮件,配置好久都没有成功,结果最后发现第三方登陆QQ邮箱不使用QQ密码,而是使用一个叫”授权码”的东西.(用户名自动生成的,授权码就填这,报错后填会测试不通过) ...