tab切换的实现

最新推荐文章于 2023-08-10 18:55:59 发布

qq_41386300

最新推荐文章于 2023-08-10 18:55:59 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41386300/article/details/90701227

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

tab切换就是鼠标放在某个标签上下面显示的就是该标签相关的内容，效果如下
在这里插入图片描述

当鼠标放在电影上显示的是电影内容，放在电视上显示的是电视内容，放在综艺上显示的是综艺内容，

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换练习</title>
    <style>
        .active{
            color: orange;
        }
        span{
            padding: 5px 20px;
        }
        .tab_con>div{
            display: none;
        }
        .tab_con>div.show{
            display: block;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="tabs">
        <span class="active">电影</span>
        <span>电视</span>
        <span>综艺</span>

    </div>
    <div class="tab_con">
        <div class="show">电影内容</div>
        <div>电视内容</div>
        <div>综艺内容</div>

    </div>
</div>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
    $(".tabs span").mouseenter(function () {
    	//给鼠标正在放着的标签添加一个active的class，删掉它的兄弟标签的active的class
        $(this).addClass('active').siblings().removeClass('active')
		// 获得鼠标正在放着的标签的index'
        var index=$(this).index();
		//找到与index相等的内容div，并给它加一个show的class，删掉它兄弟div的show的class        		
		$('.tab_con>div').eq(index).addClass('show').siblings().removeClass('show')
    })
</script>
</html>

上面代码对应的是当span标签的顺序与内容中div的顺序一一对应的情况下的代码处理

当顺序不一样时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换练习</title>
    <style>
        .active{
            color: orange;
        }
        span{
            padding: 5px 20px;
        }
        .tab_con>div{
            display: none;
        }
        .tab_con>div.show{
            display: block;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="tabs">
        <span class="active" id="movie">电影</span>
        <span id="tv">电视</span>
        <span id="zy">综艺</span>

    </div>
    <div class="tab_con">
        <div class="show movie">电影内容</div>
        <div class="tv">电视内容</div>
        <div class="zy">综艺内容</div>

    </div>
</div>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
    $(".tabs span").mouseenter(function () {
        $(this).addClass('active').siblings().removeClass('active')

        var id =$(this).attr('id');
        $('.tab_con>div').each(function (i) {
            if($(this).attr('class').indexOf(id)!=-1){
                $(this).addClass('show').siblings().removeClass('show')
            }

         })
    })
</script>
</html>

qq_41386300

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
tab切换的实现

tab切换就是鼠标放在某个标签上下面显示的就是该标签相关的内容，效果如下当鼠标放在电影上显示的是电影内容，放在电视上显示的是电视内容，放在综艺上显示的是综艺内容，代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ta...
复制链接

扫一扫