编程知识 cdmana.com

HTML two methods to achieve tab switching effect

tab Switch through js and jQuery To achieve , All the codes are as follows .

1. Page switching effect through js Realization **

<!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>
        ul>li{
   
   
            background: blue;
            margin-top: 5px;
        }
        .active{
   
   
            background: orange;
        }
        #tab >div{
   
   
            display: none;  
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li class="active"> home page </li>
        <li> entry </li>
        <li> The table shows </li>
        <li> The list shows </li>
    </ul>
    <div id="tab">
        <div style="display: block;"> Home page content </div>
        <div> Input contents </div>
        <div> The table shows the content </div>
        <div> The list shows the content </div>
    </div>
    <script>
        //  Get all li 
        var lisDom=document.getElementById("ul").children;
        //  obtain   all div
        var tabDom=document.getElementById("tab").children;
        // console.log(lisDom)
        for(let i=0;i<lisDom.length;i++){
   
   
            //  loop   Add click event 
            lisDom[i].onclick=function(){
   
   
                // alert(i) //  Pop up the current click li  The subscript .
                //   Remove   all li class  style - Select background , Set all div  hide 
                for(var j=0;j<lisDom.length;j++){
   
   
                    lisDom[j].removeAttribute("class");
                    tabDom[j].style.display="none";
                }
                //  Currently clicked  li  add to  class  style - Select background  
                lisDom[i].setAttribute("class","active");
                //  Current click  li  Corresponding  div  Show 
                tabDom[i].style.display="block";
            }
        }
    </script>
</body>
</html>

2、jQuery Realization tab Switch

<!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="./../jQuery.js"></script>
    <style>
        *{
   
   
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
   
   
            width: 500px;
            display: flex;
            margin: auto;
        }
        ul>li{
   
   
            margin-right: 20px;
        }
        #div{
   
   
            width: 500px;
            margin: auto;
            display: flex;
        }
        #div>div{
   
   
            margin-left: 50px;
        }
        .active{
   
   
            background: red;
        }
        #div>.show{
   
   
            display: inline-block;
        }
        #div>div{
   
   
            display: none;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li class="active"> The rope </li>
        <li> Blademaster </li>
        <li> NOx </li>
        <li> The tsar </li>
    </ul>
        <div id="div">
            <div class="show"> Face the wind </div>
            <div> Your sword is my sword </div>
            <div> Only I can lead you to victory </div>
            <div> Your emperor is back !!</div>
        </div>
    <script>
        $("#ul").on( "click","li",function(){
   
   
            // alert(" Click. ")
            var index=$(this).index();
            console.log(index);
            $(this).addClass("active");
            $(this).siblings().removeClass("active")
            $("#div>div").eq(index).addClass("show").siblings().removeClass("show")
        } )
    </script>
</body>
</html>

版权声明
本文为[osc_ ut5ykgwr]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224103308505k.html

Scroll to Top