参考：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. 20145316《Java程序设计》第9周学习总结

    20145316<Java程序设计>第9周学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC(Ja ...

  2. “使用驱动器中J:的光盘之前需要将其格式化

    不知道神马原因致使U盘无法打开——大家千万注意:以后遇见这种情况千万别格式化(当然如果你的U盘或者硬盘里没有重要东西那就另当别论),进入“开始-cmd”,因为我的U盘在电脑上读出来是J盘,所以在cmd ...

  3. linux性能分析命令1：top命令

    转载:http://www.cnblogs.com/peida/archive/2012/12/24/2831353.html top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的 ...

  4. Swoole学习(一)了解一下Swoole的强大并在Centos安装Swoole及PHP扩展开启

    Swoole是面向生产环境的 PHP 异步网络通信引擎,官网:https://www.swoole.com/ 使 PHP 开发人员可以编写高性能的异步并发 TCP.UDP.Unix Socket.HT ...

  5. C++中string的成员函数

    string类的构造函数: string(const char *s); //用c字符串s初始化 string(int n,char c); //用n个字符c初始化 此外,string类还支持默认构造 ...

  6. Nginx基础笔记

    压力测试工具:ab ab -n 请求数 -c 并发数 请求url Nginx: Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务. 特点 ...

  7. [BZOJ1996] chorus合唱队

    Description Input Output Sample Input 4 1701 1702 1703 1704 Sample Output 8 HINT 区间$dp$,首先每个点被放入队伍时队 ...

  8. hadoop的安装配置

    资源下载路径:https://archive.cloudera.com/cdh5/cdh/5/:https://archive.cloudera.com/cdh5/cdh/5/hadoop-2.6.0 ...

  9. 盘点SQL on Hadoop中用到的主要技术

    转载自:http://sunyi514.github.io/2014/11/15/%E7%9B%98%E7%82%B9sql-on-hadoop%E4%B8%AD%E7%94%A8%E5%88%B0% ...

  10. sscanf输入总结

    2017-08-21 15:09:47 writer:pprp sscanf很好用的,一般配合gets()来使用 /* theme: usage of sscanf writer:pprp date: ...