JavaScript-选项卡切片效果

最新推荐文章于 2024-04-18 22:54:20 发布

FIND方式

最新推荐文章于 2024-04-18 22:54:20 发布

阅读量169

点赞数

分类专栏：作品 JavaScript

本文链接：https://blog.csdn.net/weixin_43091563/article/details/103387454

版权

JavaScript 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

作品

9 篇文章 0 订阅

订阅专栏

    <style>
        #box1,#box2{
            width:300px;
            height:400px;
        }
        h3{
            height:40px;
            line-height: 40px;
        }
        h3>a{
            width:50px;
            height:40px;
            display: inline-block;
        }
        h3 a.active,h3 a:hover{
            background: #eee;
            color:#900;
        }
        #box1>.con,#box2>.con{
            width:300px;
            height:350px;
            border:solid 1px #000;
            position: relative;
        }
        #box1>.con>div,#box2>.con>div{
            width:300px;
            height:350px;
            position: absolute;
            top:0;
            left:0;
            display: none; /*隐藏所有div*/
        }
    </style>
</head>
<body>
<div id="box1">
    <h3 class="titles">
        <a href="javascript:void(0)" class="active">标题1</a>
        <a href="javascript:void(0)">标题2</a>
        <a href="javascript:void(0)">标题3</a>
        <a href="javascript:void(0)">标题4</a>
    </h3>
    <div class="con">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="box2">
    <h3 class="titles">
        <a href="javascript:void(0)" class="active">标题1</a>
        <a href="javascript:void(0)">标题2</a>
        <a href="javascript:void(0)">标题3</a>
        <a href="javascript:void(0)">标题4</a>
    </h3>
    <div class="con">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>

显示第一个div；
鼠标悬浮在每一个a上时;/a[x].index=x;/a[x].οnmοuseοver=function
每个div隐藏起来;/显示当前div

<script>
    window.onload=function(){
        tabs("box2");
        tabs("box1");
    }
    var as=document.getElementsByClassName("titles")[0].children; //define as=h3>a
    var cons=document.getElementsByClassName("con")[0].children;//define cons=div>div
    cons[0].style.display="block"; console.log("defult show cons[0]");//display cons[0]=div.1
    for(var x=0;x<as.length;x++){ //every as[x] funcition
        as[x].index=x;//index=as[x].x
        as[x].onmouseover=function(){
            console.log(this.index); // x always=4; this.index在改变
            for(var y=0;y<cons.length;y++){
                cons[y].style.display="none";//none all div
            } console.log(this.index);//show this=cons[index] div
              cons[this.index].style.display="block";
        }
    }
</script>

FIND方式

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript-选项卡切片效果

<style> #box1,#box2{ width:300px; height:400px; } h3{ height:40px; line-height: 40px; } h3>a{ ...
复制链接

扫一扫