jQuery实现tab选项卡切换

最新推荐文章于 2023-07-31 19:07:28 发布

伦为JAY下囚

最新推荐文章于 2023-07-31 19:07:28 发布

阅读量1.4k

点赞数 4

分类专栏：前端文章标签： jQuery 选项卡

本文链接：https://blog.csdn.net/HJay_Chou/article/details/92421911

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

项目
效果

项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-tab选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 448px;
            height: 300px;
            border:1px solid red;
            margin:50px auto;
        }
        .nav li{
            width: 112px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            list-style: none;
            float: left;
            background:orange;
            cursor: pointer;
        }
        .nav .current{
            background:#ccc;
        }
        .content li {
            list-style:none;
            display: none;
        } 
        .content .show{
            display: block;
        }
        /*.content li img{*/
            /*width: 448px;*/
            /*height: 250px;*/
        /*}*/
        .content li p{
            width: 448px;
            height: 250px;
        }
    </style>
    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //监听选项卡的移入事件
            // $(".nav>li").mouseenter(function () {
            //     //1.1 修改被移入选项卡的背景颜色
            //     $(this).addClass("current");
            //     //1.2 获取当前移入选项卡的索引
            //     var index=$(this).index();
            //     //1.3 根据索引找到相应的图片
            //     var $li=$(".content>li").eq(index);
            //     //1.4 显示找到的图片
            //     $li.addClass("show");
            // });
            //
            // //监听选项卡的移出事件
            // $(".nav>li").mouseleave(function () {
            //     //1.1还原移出选项卡的背景颜色
            //     $(this).removeClass("current");
            //     //1.2 获取当前移入选项卡的索引
            //     var index=$(this).index();
            //     //1.3 根据索引找到相应的图片
            //     var $li=$(".content>li").eq(index);
            //     //1.4 隐藏找到的图片
            //     $li.removeClass("show");
            // });

            //监听选项卡的移入事件
            $(".nav>li").mouseenter(function () {
                //1.1 修改被移入选项卡的背景颜色
                    $(this).addClass("current");
                //1.2 还原其他兄弟选项卡的背景颜色
                    $(this).siblings().removeClass("current");
                //1.3 获取当前移入选项卡的索引
                    var index=$(this).index();
                //1.4 根据索引找到相应的图片
                    var $li=$(".content>li").eq(index);
                //1.5 隐藏非当前的其他图片
                    $li.siblings().removeClass("show");
                //1.6 显示对应的图片
                    $li.addClass("show");
            });
        });

    </script>
</head>
<body>
    <div class="box">
        <ul class="nav">
            <li class="current">HTML5</li>
            <li>jQuery</li>
            <li>C语言</li>
            <li>JavaScript</li>
        </ul>
        <ul class="content">
            <li class="show">
                <!--<img src="img/123.jpg" alt="">-->
                <p>html5是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言（ HTML）的第五次重大修改
                    （这是一项推荐标准、外语原文： W3C Recommendation、见本处 参考资料原文内容： [1] ）2014年10月29日，
                    万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
                    HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。
                    HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括新的解析规则增强了灵活性、新属性、淘汰过时的
                    或冗余的属性等。</p>
            </li>
            <li>
                <!--<img src="img/123.jpg" alt="">-->
                <p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
                    jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，
                    提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
                    jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，
                    并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，
                    如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。</p>
            </li>
            <li>
                <!--<img src="img/123.jpg" alt="">-->
                <p>C语言是一门面向过程、抽象化的通用程序设计语言，广泛应用于底层开发。C语言能以简易的方式编译、处理低级存储器。
                    C语言是仅产生少量的机器语言以及不需要任何运行环境支持便能运行的高效率程序设计语言。尽管C语言提供了许多低级处理的功能，
                    但仍然保持着跨平台的特性，以一个标准规格写出的C语言程序可在包括一些类似嵌入式处理器以及超级计算机等作业平台的许多
                    计算机平台上进行编译。</p>
            </li>
            <li>
                <!--<img src="img/123.jpg" alt="">-->
                <p>avascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由欧洲电脑制造商协会
                    通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox等）支持。
                    JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。
                    它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。</p>
            </li>
        </ul>
    </div>
</body>
</html>

效果

在这里插入图片描述

伦为JAY下囚

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
jQuery实现tab选项卡切换

文章目录项目效果项目<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07-tab选项卡</title> <style> *{ margin: 0; ...
复制链接

扫一扫

专栏目录