zoukankan      html  css  js  c++  java
  • jQuery选项卡切换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>    
        <style>
            *{
                margin:0;
                padding:0;
            }
            #tab li{
                80px;
                height: 40px;
                line-height:40px;
                text-align:center;
                float:left;
                cursor: pointer;
                list-style: none;
            }
            #content{
                position: relative;
            }
            #content1,#content2,#content3{
                 300px;
                height:100px;
                padding:30px;
                position:absolute;
                top: 40px;
                left:0;
            }
             #tab1, #content1 {
                  background-color: pink;
                }
            
                #tab2, #content2 {
                  background-color: yellow; 
                }
            
                #tab3, #content3 {
                  background-color: lightgreen;
                }
                
                .current{
                    border: solid 2px red;
                }
        </style>
    
        <script>
            $(function(){
                // 隐藏后两个选项卡
                $("#content div[id!=content1]").hide();
                $("#tab li").click(function(){
                    // 先删除所有的选项卡的边框样式
                    $("#tab li").removeClass("current")
                    // 当前选项卡添加边框样式
                    $(this).addClass("current");
    
                    //先隐藏所有的选项卡
                    $("#content div").hide();
                    //获取当前下标
                    var currentIndex = $(this).index();
                    //再显示当前的选项卡
                    $("#content div").eq(currentIndex).show();
                })
            })
        </script>
    </head>
    <body>
        <ul id="tab">
            <li id="tab1">首页</li>
            <li id="tab2">通知</li>
            <li id="tab3">消息</li></li>
        </ul>
    
        <div id="content">
            <div id="content1">
                首页
            </div>
            <div id="content2">
                通知
            </div>
            <div id="content3">
                消息
            </div>
        </div>
    </body>
    </html>

     

     

     补充知识:

    jQuery :eq() 选择器

    定义和用法

    :eq() 选择器选取带有指定 index 值的元素。

    index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。

    经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素。

    语法

    $(":eq(index)")
  • 相关阅读:
    OOP3(继承中的类作用域/构造函数与拷贝控制/继承与容器)
    OOP2(虚函数/抽象基类/访问控制与继承)
    OOP1(定义基类和派生类)
    拷贝控制3(对象移动)
    拷贝控制2(拷贝控制和资源管理/交换操作/动态内存管理)
    拷贝控制1(拷贝、赋值与销毁)
    动态内存2(动态数组)
    python--numpy模块、spicy模块、 matplotlib模块
    Java--23种设计模式之decorator模式
    Android开发---开发文档翻译
  • 原文地址:https://www.cnblogs.com/hr-7/p/14688354.html
Copyright © 2011-2022 走看看