jQuery实现tab栏转换

最新推荐文章于 2022-05-18 10:58:28 发布

crystal_iwwish

最新推荐文章于 2022-05-18 10:58:28 发布

阅读量186

点赞数

分类专栏：案例详解文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/crystal_iwwish/article/details/120912889

版权

案例详解专栏收录该内容

6 篇文章 3 订阅

订阅专栏

在这里插入图片描述
如图所示，通过jQuery实现tab栏转换
分析：
1.鼠标点击导航，只有当前被点击的导航出现背景颜色（排他思想）
2.当前被点击导航的内容更改

用到的方法有：
siblings：查找兄弟元素
addClass：添加类名
removeClass：删除类名
index：当前元素下标值
eq：根据索引值筛选某一个元素

HTML和CSS代码

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                导航1内容
            </div>
            <div class="item">
              导航2内容
            </div>
            <div class="item">
              导航3内容
            </div>
            <div class="item">
              导航4内容
            </div>
            <div class="item">
              导航5内容
            </div>

        </div>
    </div>
  
</body>

</html>

JavaScript代码

  <script>        
        $('.tab_list li').click(function () {
            // 类名操作（排他思想）
            $(this).addClass('current').siblings().removeClass('current');
            // 获取索引值
            let index = $(this).index();
            // 让对应的div显示
            $('.tab_con div').eq(index).css('display', 'block').siblings().css('display', 'none');;
        });
    </script>

crystal_iwwish

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现tab栏转换

如图所示，通过jQuery实现tab栏转换分析：1.鼠标点击导航，只有当前被点击的导航出现背景颜色（排他思想）2.当前被点击导航的内容更改用到的方法有：siblings：查找兄弟元素addClass：添加类名removeClass：删除类名index：当前元素下标值eq：根据索引值筛选某一个元素HTML和CSS代码 <!DOCTYPE html><html lang="en"><head> <meta charset="U.
复制链接

扫一扫