原型方法选项卡

最新推荐文章于 2021-07-26 11:03:15 发布

qq_38068491

最新推荐文章于 2021-07-26 11:03:15 发布

阅读量469

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83686360

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
    *{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .warp{
        width: 360px;
        height: 400px;
        border: 1px solid #b6b6b6;    
        margin: 50px auto;
    }
    #btn{
    width: 360px;
    height: 40px;
    }
    #btn li{
        float: left;
        width: 118px;
        margin: 0 1px;
        background: #ddd;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    #btn .active{
        background: #b6b6b6;
    }

    #show{
        width: 360px;
        height: 460px;

    }
    #show li{
        width: 360px;
        height: 460px;
        display: none;
    }

    </style>

    </head>
    <body>
    <div>
    <div class="warp" id='warp'>
            <ul id="btn">
                <li index="0" class="active">选项1</li>
                <li index="1">选项2</li>
                <li index="2">选项3</li>
            </ul>
            <ul id="show">                
                <li style="background:green;display:block"><img src="" alt=""></li>
                <li style="background:red;"><img src="" alt=""></li>
                <li style="background:pink;"><img src="" alt=""></li>
            </ul>
    </div>
    </div>
    </body>
</html>
   <script>
		//构造函数
		// 实例中有属性
		//原型下写方法
   window.onload=function(){
   	new TableChooseCard();
   }
   
   function TableChooseCard(){
   	this.btn=document.getElementById("btn");
   	this.show=document.getElementById("show");
   	//执行初始化功能
   	this.init();
   }
   
   //初始化选项卡功能
   TableChooseCard.prototype.init=function(){
   	this.tableClick();
   }
   
   TableChooseCard.prototype.tableClick=function(){
   	var _this=this;
   	this.btn.onclick=function(e){
   		var e=e||event;
   		var target=e.target||e.srcElement;
   		if(target.nodeName.toLowerCase()=="li"){
   			for(var i=0;i<_this.btn.children.length;i++){
   				_this.btn.children[i].className="";
   				_this.btn.children[i].index=i;
   			}
   			target.className="active";
   			_this.index=target.index;
   			_this.showContent();
   		}
   	}
   }
   
   TableChooseCard.prototype.showContent=function(){
   for (var i = 0; i < this.show.children.length; i++) {
   	this.show.children[i].style.display="none";
   }
   	this.show.children[this.index].style.display="block";
   }
   </script>

qq_38068491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原型方法选项卡

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; *{ margin: 0; padding: 0; list-style-type: non
复制链接

扫一扫