JS效果

Posted 2020-10-01 BadGirl_Xiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS效果相关的知识，希望对你有一定的参考价值。

多标签页效果 tab切换

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css"> 
        .tab{
            float:left;
            width:150px;
            height:60px;
            border:1px solid #ddd;
            border-bottom:none;
            text-align:center;
            line-height:60px;
            cursor:pointer;
        }
        #tab0,#page0{
            background:#faa;
        }
        #tab1,#page1{
            background:#afa;
        }
        #tab2,#page2{
            background:#aaf;
        }
        .pageContainer{
            position:relative;
            clear:both
        }
        .pageContainer div{
            position:absolute;
            width:500px;
            height:100px;
            border:1px solid #ddd;
            border-top:none
        }
        .topPage{
            z-index:1
        }
    </style>
</head>
<body>
    <h2>多标签页效果</h2>
    <div id="tab0" class="tab" onclick="showPage(0)">10元套餐</div>
    <div id="tab1" class="tab" onclick="showPage(1)">50元套餐</div>
    <div id="tab2" class="tab" onclick="showPage(2)">100元套餐</div>
    <div id="pageContainer" class="pageContainer">
        <div id="page0" class="topPage">10元套餐详情</div>
        <div id="page1">50元套餐详情</div>
        <div id="page2">100元套餐详情</div>
    </div>
    
    <script type="text/javascript"> 
        function showPage(num){
            //把其他标签页的class改为page
            var container = document.getElementById(‘pageContainer‘);
            var divList = container.getElementsByTagName("div");
            for(var i=0; i<divList.length; i++){
                if(i!=num){
                    var div=divList[i];
                    div.removeAttribute("class");
                }
            }
            
            //把待显示的标签页的class改为page topPage
            var pageDiv = document.getElementById("page"+num);
            var classNode=document.createAttribute(‘class‘);
            classNode.value="topPage"
            pageDiv.setAttributeNode(classNode);
            
        }
    </script>
</body>
</html>

View Code

以上是关于JS效果的主要内容，如果未能解决你的问题，请参考以下文章

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

炫酷 CSS 背景效果的 10 个代码片段

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段：一个日期离现在多久了