参考：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. shell脚本批量启动zookeeper

    脚本名称为zk_run.sh 将下面代码粘贴进zk_run.sh 添加执行权限 chmode +x zk_run.sh 运行脚本 ./zk_run.sh start 如果发现zookeeper没有启动 ...

  2. Core ML 入门

    1.下载Xcode 9 2.下载模型,https://developer.apple.com/machine-learning/ 3.开动.. 4.待续 模拟器66的

  3. JqGrid 隐藏水平滚动条完美解决方案

    我有强迫症,网上找的几个看着就不舒服 不用更改样式表,隐藏最右侧的边框. .ui-jqgrid .ui-jqgrid-bdiv{ overflow-x: hidden; } 不用通过js控制加1px ...

  4. IP查找所属网段

    最近同学接到阿里面试题 package io.guangsoft.analysis; /* 数据文件: 1.1.1.0/24,123 1.1.2.0/28,345 1.2.0.0/16,789 */ ...

  5. nsis源码 nsisdialogdesigner

    ; 安装程序初始定义常量!define PRODUCT_NAME "nsisdialogdesigner"!define PRODUCT_VERSION "1.1.3&q ...

  6. [翻译]纠正PostCSS的4大认识误区

    市面上已经有很多的前端工具,再来引入新的前端工具,价值大不大?这主要取决于,它是否给开发人员提供了新的功能,是否值得花时间和精力去学习和使用? PostCSS出现时有一个很有趣的现象.像sass和le ...

  7. linux如何以十六进制格式来查看任意文件

    答:vim+xxd 使用方法如下: 1.vim -b file.txt 2.在vim的命令行模式下对文件进行16进制转换 输入:%!xxd 3.在vim的命令行模式下回到正常格式 输入:%!xxd - ...

  8. word里怎么删除某一列

    光标定位在第二列第一个字的前面,然后按住Alt键,拖动鼠标,选中第二列字,松开Alt键,点击Delete键即可

  9. caohaha's stuff

    2017-08-20 11:12:29 writer:pprpCCPC预选赛水平太菜了,去不了了 这个是一个找规律的题目,题意一开始也很难理解 题意描述: 给你一个数,比如说1,在一个坐标系中你需要用 ...

  10. Nagios安装完后status map,trends等页面访问出错之解决

    首先,可以进入/usr/local/nagios/sbin, [root@localhost sbin]# ldd statusmap.cgi linux-vdso.so. => (0x0000 ...