几种Tab面板实现方法

最新推荐文章于 2023-09-01 16:34:23 发布

HaanLen

最新推荐文章于 2023-09-01 16:34:23 发布

阅读量1.2k

点赞数

分类专栏： JavaScript案例

本文链接：https://blog.csdn.net/weixin_40119412/article/details/104457373

版权

JavaScript案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS实现Tab面板

不能自行切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .wrap{
            margin: 20px auto;
            width: 800px;
            height: 500px;
            border: 1px solid crimson;
            position: relative;
        }
        label{
            width: 150px;
            height: 33px;
            float: left;
            text-align: center;
            line-height: 33px;
            border: 1px solid darkcyan;
        }
        label:nth-of-type(4){
            border-right: none;
        }
        label span{
            cursor: pointer;
        }
        label input{
            width: 0;
        }
        label div{
            position: absolute;
            display: none;
        }
        input:checked+div{
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <label for="">
            <span>玫瑰</span>
            <input type="radio" name="tab" checked>
            <div>玫瑰花🌹</div>
        </label>
        <label for="">
            <span>雏菊花</span>
            <input type="radio" name="tab">
            <div>雏菊</div>
        </label>
        <label for="">
            <span>向日葵</span>
            <input type="radio" name="tab">
            <div>向日葵</div>
        </label>
        <label for="">
            <span>满天星</span>
            <input type="radio" name="tab">
            <div>满天星</div>
        </label>
    </div>
    <script>
        
    </script>
</body>
</html>

在这里插入图片描述

JavaScript实现Tab面板

思路:
1.实现标题小模块的Tab切换

首先给所有的标题小模块清除样式
给鼠标移入的标题小模块添加样式

2.实现主体模块和标题小模块之间的绑定

给标题小模块添加一个属性index,用以记录标题小模块的索引
通过getAttribute()方法得到索引,从而对应主体模块的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        #box{
            width: 700px;
            height: 300px;
            border: 1px solid darkgreen;
            margin: 30px;
        }
        #list li{
            float: left;
            width: 150px;
            height: 50px;
            border: 1px solid sienna;
            list-style: none;
            text-align: center;
            line-height: 50px;
        }
  #deli{
      height: 50px;
  }
        #list,#deli div{
            height: 100%;
            display: none;
        }
        #list,#deli .current{
            display: block;
            background-color: tan;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li class="current">english</li>
            <li>chinese</li>
            <li>math</li>
            <li>P.E.</li>
        </ul>
        <div id="deli">
            <div class="current">english</div>
            <div>chinese</div>
            <div>math</div>
            <div>p.e</div>
        </div>
    </div>
    <script>
        var list=document.getElementById('list');
        //获取所有li
        var lis=list.getElementsByTagName('li');
        var deli=document.getElementById('deli');
        //获取所有主体的div
        var divs=deli.getElementsByTagName('div');
        for(var i=0;i<lis.length;i++){//给所有li注册事件
            var li=lis[i];
            li.setAttribute('index',i);
//当鼠标移入li的时候，清除所有小模块的样式，只给当前小模块添加样式
            li.onmouseover=function(){
                for(var i=0;i<lis.length;i++){
                    lis[i].className="";
                    this.className="current";//清除所有模块样式
                    divs[i].className='';
                    divs[i].style.display='none';
                    //对当前模块进行操作
                    var index=parseInt(this.getAttribute('index'));
                    divs[index].className='current';
                    divs[index].style.display='block';
                }
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

jQuery实现Tab面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .box{
            width: 670px;
            height: 300px;
            margin: 30px;
            border: 1px solid black;
        }
        .wrap li{
            float: left;
            width: 160px;
            height: 50px;
            border: 1px solid sienna;
            list-style: none;
            text-align: center;
            line-height: 50px;
        } 
        .deli{
            height: 100%;
        }       
        .deli div{
            height: 100%;
            display: none;
        }
        .wrap .current{
            font-size: 25px;
        }
        .wrap .current,.deli div.product{
            height: 100%;
            display: block;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="wrap">
            <li class="current">english</li>
            <li>chinese</li>
            <li>math</li>
            <li>pe</li>
        </ul>
        <div class="deli">
            <div class="product">english</div>
            <div>chinese</div>
            <div>math</div>
            <div>pe</div>
        </div>
    </div>
    <script>
        $(function () {
            $(".wrap>li").mouseover(function () {
                //删除样式
                $(this).siblings("li").removeClass("current");
                //增加样式
                $(this).addClass("current");
                //显示对应当前div
                var index=$(this).index();
                $(".deli>div").removeClass("product");
                $(".deli>div:eq("+index+")").addClass("product");
              });
          });
    </script>
</body>
</html>

在这里插入图片描述

jQuery和Bootstrap实现Tab面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab面板的实现</title>
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/tab.js"></script>
    <script>
        $(function(){
            $('.tabs a:last').tab('show');
        })
    </script>
</head>
<body>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">玫瑰花🌹</a></li>
        <li><a href="#tab2" data-toggle="tab">雏菊</a></li>    
        <li><a href="#tab3" data-toggle="tab">向日葵</a></li> 
        <li><a href="#tab4" data-toggle="tab">满天星</a></li> 
        <li><a href="#tab5" data-toggle="tab">雏菊1</a></li>    
        <li><a href="#tab6" data-toggle="tab">向日葵1</a></li> 
        <li><a href="#tab7" data-toggle="tab">满天星1</a></li>          
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">玫瑰花🌹</div>
        <div class="tab-pane" id="tab2">雏菊</div>
        <div class="tab-pane" id="tab3">向日葵</div>
        <div class="tab-pane" id="tab4">满天星</div>   
        <div class="tab-pane" id="tab5">雏菊1</div>
        <div class="tab-pane" id="tab6">向日葵1</div>
        <div class="tab-pane" id="tab7">满天星1</div>         
    </div>     
    </div>
</body>
</html>

在这里插入图片描述

HaanLen

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
几种Tab面板实现方法

CSS实现Tab面板不能自行切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
复制链接

扫一扫