参考：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. netty9---使用编码解码器

    客户端: package com.client; import java.net.InetSocketAddress; import java.util.Scanner; import java.ut ...

  2. 多媒体文件格式分析 MP3文件结构及编解码流程

    多媒体文件格式分析 http://blog.csdn.net/taniya001/article/details/7962864 多媒体文件格式分析 MP3文件结构及编解码流程 http://www. ...

  3. SpringMvc接受特殊符号参数被转义

    WEB开发时,在前端通过get / post 方法传递参数的时候  如果实参附带特殊符号,后端接收到的值中特殊符号就会被转义 例如该请求: http://localhost:10001/demo/in ...

  4. react-refetch的使用小例子

    出处:<react设计模式和最佳实践> 作者:米凯莱·贝尔托利 出版时间:2018年8月第1版(还算新) 使用react-refetch来简化api获取数据的代码 const List = ...

  5. 20145329 《JAVA程序设计》实验三总结

    实验日期:2016.4.12 实验时间:15:30~17:30 实验序号:实验三 实验名称: 敏捷开发与XP实践 实验目的与要求: XP基础 XP核心实践 相关工具 实验内容 1.使用git托管代码 ...

  6. 【边框回归】边框回归(Bounding Box Regression)详解（转）

    转自:打开链接 Bounding-Box regression 最近一直看检测有关的Paper, 从rcnn, fast rcnn, faster rcnn, yolo, r-fcn, ssd,到今年 ...

  7. webservice的cxf和spring整合客户端开发

    1.新建一个java项目 2.导入cxf相关的jar包,并部署到项目中 3.用命令生成客户端使用说明文档 wsdl2java -p com.xiaostudy -d . http://127.0.0. ...

  8. bugfree登录后报错PHP Fatal error: Call-time pass-by-reference has been removed in

    详细报错信息[Tue Apr 25 06:49:07.556316 2017] [:error] [pid 21799] [client *.*.*.*:55813] PHP Fatal error: ...

  9. Oracle函数中文转拼音（首字母）

    CREATE OR REPLACE FUNCTION FUN_GET_PYCODE(p_str IN VARCHAR2, p_flag NUMBER DEFAULT NULL) RETURN VARC ...

  10. P3600 随机数生成器

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...