JQ简短代码实现选项卡功能

标签：笔记

题目：

实现选项卡，点击01跳转到01选项卡的内容，点击02跳转到02选项卡的内容。

在这里插入图片描述

1.主体Body部分

做一个基础的结构，设置行内默认样式。
z-index 代表的是我们显示的一个层级关系

<body>
<ul class="ul1">
    <li style="background-color: #ffd700">01</li>
    <li>02</li>
    <li>03</li>
</ul>
<div class="Box">
    <div style="z-index: 1">选项卡1的内容</div> 
    <div>选项卡2的内容</div>
    <div>选项卡3的内容</div>
</div>
</body>

2.CSS基础样式

相应的地方也做了标注，应该没什么问题，接下来就是Script部分了

	   *{
            list-style-type: none;
            margin: 0;
            padding: 0;
            font-size: 15px;
        }
        .ul1 li{
        	width: 73px;
            height: 29px;
            float: left;       /*添加左浮动*/
            line-height: 29px; /*垂直居中*/
            cursor: pointer;   /*将指针改为小手*/
            text-align: center;/*水平居中*/
            margin-right: 10px;/*外边距 间隔*/
            background-color: #dddddd;
        }
        .Box{
            width: 400px;
            height: 200px;
            position: relative;  /*相对定位 父元素*/
            clear: both;  		/*清除浮动*/
        }
        .Box div{
            width: 400px;
            height: 200px;
            background-color: #ffd700;
            position: absolute;	/*绝对定位 子元素*/
        }

3.JQ部分

涉及到一些基础的语法知识，这里给大家做个介绍：

css() 设置样式
siblings() 获取同级元素，兄弟选择器
index() 获取元素下标
eq() 下标选择器

$(function () {
            $('.ul1 li').click(function () {
                $(this).css('background-color','#ffd700').siblings().css('background-color','#dddddd');
                $('.Box div').eq($(this).index()).css('z-index','1').siblings().css('z-index','0');
            })
        })

4.测试

我们打开页面

点击02

2.成功实现

点击03也是如此，大功告成！~~~

5.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        *{
            list-style-type: none;
            margin: 0;
            padding: 0;
            font-size: 15px;
        }
        .ul1 li{
            float: left;  
            width: 73px;
            height: 29px;
            line-height: 29px;
            cursor: pointer;
            text-align: center;
            margin-right: 10px;
            background-color: #dddddd;
        }
        .Box{
            width: 400px;
            height: 200px;
            position: relative;
            clear: both;
        }
        .Box div{
            width: 400px;
            height: 200px;
            background-color: #ffd700;
            position: absolute;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            $('.ul1 li').click(function () {
                $(this).css('background-color','#ffd700').siblings().css('background-color','#dddddd');
                $('.Box div').eq($(this).index()).css('z-index','1').siblings().css('z-index','0');

            })
        })
    </script>
</head>
<body>
<ul class="ul1">
    <li style="background-color: #ffd700">01</li>
    <li>02</li>
    <li>03</li>
</ul>
<div class="Box">
    <div style="z-index: 1">选项卡1的内容</div>
    <div>选项卡2的内容</div>
    <div>选项卡3的内容</div>
</div>
</body>
</html>

本文链接：https://blog.csdn.net/weixin_46400740/article/details/106274934

智能推荐

Tornado day02

一，项目模板： Tornado的项目也可以像Django和flask一样,将功能细分为几个模块 1.1 _ _ init _ _.py 1.2 setting .py 1.3 urls .py 1.4 views .py 1.5 manage .py 将这个模板拷贝下来,以后创建新项目的时候可以直接拷贝一份,在此模板上修改使用文件链接链接：https://pan.baidu.com/s/11E...

PAT乙级 | 1095 解码PAT准考证 (25分)（做题过程+注意事项+运行超时解决方法）

PAT 准考证号由 4 部分组成：第 1 位是级别，即 T 代表顶级；A 代表甲级；B 代表乙级；第 2~4 位是考场编号，范围从 101 到 999；第 5~10 位是考试日期，格式为年、月、日顺次各占 2 位；最后 11~13 位是考生编号，范围从 000 到 999。现给定一系列考生的准考证号和他们的成绩，请你按照要求输出各种统计信息。输入格式：输入首先在一行中给出两个正整数 ...

谈谈Java异常

0 概述对于java工程师来说，是经常和异常打交道的，本文主要来谈一谈java中的异常。 1 异常类的继承关系从下图（说明：图中只是列出部分异常类）可以看出：异常的基类为Throwable，主要分为两个分支，即Error体系和Exception体系。 Exception下面分为RuntimeException和非RuntimeException（如IOException） 2 几种异常的区别...

通过设立FatFS隐藏分区，实现系统文件和用户文件的隔离

嘛。。这是一个关于个人使用FatFS文件系统的一点小的经验。我知道大家都会百度和谷歌，关于文件系统有什么用，文件系统怎么移植上自己的平台，看看资料也就懂了，在这里不再详述（打字太慢一分钟50-60字懒得写）。本系列默认已经可以将设备模拟成u盘，并且已经通过修改diskio.c，可以实现ff.c中的各项功能（不能实现的自行面壁）。FatFS项目官网 http://elm-chan.org/f...

Mysql之锁与事务知识要点小结

Mysql之锁与事务平时的业务中，顶多也就是写写简单的sql，连事务都用的少，对锁这一块的了解就更加欠缺了，之前一个大神分享了下mysql的事务隔离级别，感觉挺有意思的，正好发现一个很棒的博文，然后也收集了一些相关知识，正好来学习下，mysql中锁与事务的神秘面纱，主要内容包括共享锁和排它锁的区别以及适合范围 mysql的表锁和行锁的区别怎么判断一个sql是否执行了锁，执行的是表锁还是行锁 ...