zoukankan      html  css  js  c++  java

  • jQuery实现点击式选项卡

    参考：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;
             50px;
            cursor: pointer;
        }
        #menu li.tabFocus{
             50px;
            font-weight: bold;
            background-color: #f3f2e7;
            border: solid 1px #666;
            border-bottom: 0;
            z-index: 100;
            position: relative;
        }
        #content{
             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>
  • 相关阅读:
    Elasticsearch布尔查询——bool
    Elasticsearch查询
    数据从文件导入Elasticsearch
    Elasticsearch批处理操作——bulk API
    Mysql笔记——DCL
    Mysql笔记——DML
    Mysql笔记——DDL
    Java笔记——面向接口编程（DAO模式）
    Java笔记——equals和==的区别
    JavaWeb笔记——注册登录系统项目思路
  • 原文地址：https://www.cnblogs.com/meet/p/4748499.html
Copyright © 2011-2022 走看看