多Tab点击切换效果实现

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

_洋

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

阅读量528

点赞数

分类专栏： jQuery 文章标签： javascript css3 jquery

本文链接：https://blog.csdn.net/mantou_riji/article/details/124525772

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多Tab点击切换</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #tab li{
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor:pointer;
            text-align: center;
            padding: 0 20px;
        }
        #tab1{
            background-color: teal;
        }
        #tab2{
            background-color: tomato;
        }
        #tab3{
            background-color: thistle;
        }
        
        
        #contenter{
            width: 360px;
            height: 200px;
            /* border: tan solid 2px; */
            position: relative; 
            top: 40px;
        }
        #contenter #content1{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: teal;
        }
        #contenter #content2{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: tomato;
            display: none;
        }
         #contenter #content3{
             width: 100%;
             height: 100%;
             position: absolute;
             background-color: thistle;
             display: none;
         }


    </style>
</head>
<body>
    <h2>多Tab点击切换</h2>
    <ul id='tab'>
        <li id='tab1' value='1'>10元套餐</li>
        <li id='tab2' value='2'>30元套餐</li>
        <li id='tab3' value='3'>50元套餐</li>
    </ul>
    <div id='contenter'>
        <div id = 'content1'>
            10元套餐详情: <br/>每月套餐内拨打100分钟，超出部分2毛/分钟
        </div>
        <div id = 'content2'>
            30元套餐详情: <br/>每月套餐内拨打300分钟，超出部分1.5毛/分钟
        </div>
        <div id = 'content3'>
            50元套餐详情: <br/>随便打
        </div>
    </div>

    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $contents = $('#contenter>div')
        // 给li添加监听
        // jQuery自动遍历给每一个li添加监听事件——隐式遍历
        $('#tab>li').click(function (){
            // 隐藏所有div
           $contents.css('display','none')
        
           var index =$(this).index()
           $contents[index].style.display = 'block'
        //或者使用jQuery：  $($contents[index]).css('display','block')
      
        })
    </script>

    
</body>
</html>

改进：没有必要所有页面进行隐藏，应该选择显示的页面进行隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多Tab点击切换</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #tab li{
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor:pointer;
            text-align: center;
            padding: 0 20px;
        }
        #tab1{
            background-color: teal;
        }
        #tab2{
            background-color: tomato;
        }
        #tab3{
            background-color: thistle;
        }
        
        
        #contenter{
            width: 360px;
            height: 200px;
            /* border: tan solid 2px; */
            position: relative; 
            top: 40px;
        }
        #contenter #content1{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: teal;
        }
        #contenter #content2{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: tomato;
            display: none;
        }
         #contenter #content3{
             width: 100%;
             height: 100%;
             position: absolute;
             background-color: thistle;
             display: none;
         }


    </style>
</head>
<body>
    <h2>多Tab点击切换</h2>
    <ul id='tab'>
        <li id='tab1' value='1'>10元套餐</li>
        <li id='tab2' value='2'>30元套餐</li>
        <li id='tab3' value='3'>50元套餐</li>
    </ul>
    <div id='contenter'>
        <div id = 'content1'>
            10元套餐详情: <br/>每月套餐内拨打100分钟，超出部分2毛/分钟
        </div>
        <div id = 'content2'>
            30元套餐详情: <br/>每月套餐内拨打300分钟，超出部分1.5毛/分钟
        </div>
        <div id = 'content3'>
            50元套餐详情: <br/>随便打
        </div>
    </div>

    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $contents = $('#contenter>div')
        var currentIndex = 0
        // 给li添加监听
        // jQuery自动遍历给每一个li添加监听事件——隐式遍历
        $('#tab>li').click(function (){       
           $contents[currentIndex].style.display = 'none'
           var index =$(this).index()
           $contents[index].style.display = 'block'
           currentIndex = index  
        })
    </script>   
</body>
</html>

_洋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多Tab点击切换效果实现

效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多Tab点击切换</title> <style> *{ margin:0; padding:0; } #tab li{ flo
复制链接

扫一扫