关于Teb栏的一个小例子。

最新推荐文章于 2021-10-06 08:15:53 发布

Royma_

最新推荐文章于 2021-10-06 08:15:53 发布

阅读量588

点赞数

本文链接：https://blog.csdn.net/Royma_/article/details/78698951

版权

关于teb栏，主要就是利用排他思想（即：消灭所有人，留下自己。）

由两个部分构成：点亮盒子（双重for循环）和利用索引值显示盒子。

（函数封装终于开始了~）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        ul {
            list-style: none;
            width: 600px;
            margin-left: -1px;
            overflow: hidden;
        }
        li {
            width: 100px;
            height: 30px;
            float: left;
            border-left: 1px solid #000;
            background-color: purple;
            cursor: pointer;
            text-align: center;
            line-height: 30px;
        }
        span {
            display: block;
            width: 500px;
            height: 370px;
            font: 700 100px/370px "simsun";
            text-align: center;
            background-color: pink;
        }

        .current {
            background-color: pink;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
    <script >
    	window.onload = function(){

    		var boxArr =document.getElementsByClassName("box");
    		// 函数的调用
    		for(var i =0; i<boxArr.length;i++){
    			fn(boxArr[i]);
    		}
    		// 函数的封装
    		function fn(ele){
    			var liArr=ele.getElementsByTagName("li");
		    	var spanArr = ele.getElementsByTagName("span");

		    	for (var i = 0; i < liArr.length; i++) {
		    		// liArr[i].(index) = i;
		    		liArr[i].setAttribute("index",i);
		    		liArr[i].onmouseover = function () {
		    			// 书写驱动程序：1.点亮盒子2.利用索引值获取显示盒子（利用排他思想）
		    			for (var j = 0; j < liArr.length; j++) {
		    				liArr[j].setAttribute("class","");
		    				spanArr[j].setAttribute("class","hide");
		    				// liArr[j].className = "";
		    			}
		    			// this.className = "current";
		    			// spanArr[this.index].className="show";
		    			this.setAttribute("class","current");
		    			spanArr[this.getAttribute("index")].setAttribute("class","show");
		    		}
		    	}

	    	}
	    	
   		 }



    </script>
</head>
<body>

    <div class="box">
        <ul>
            <li>陈一发儿</li>
            <li>女流66</li>
            <li>冯提莫</li>
            <li>周二珂</li>
            <li>轩子</li>
        </ul>
        <span>陈一发儿</span>
        <span>女流66</span>
        <span>冯提莫</span>
        <span>周二珂</span>
        <span>轩子</span>
    </div>

    <div class="box">
       <ul>
            <li>陈一发儿</li>
            <li>女流66</li>
            <li>冯提莫</li>
            <li>周二珂</li>
            <li>轩子</li>
        </ul>
        <span>陈一发儿</span>
        <span>女流66</span>
        <span>冯提莫</span>
        <span>周二珂</span>
        <span>轩子</span>
    </div>


	
</body>
</html>

Royma_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Teb栏的一个小例子。

关于teb栏，主要就是利用排他思想（即：消灭所有人，留下自己。）由两个部分构成：点亮盒子（双重for循环）和利用索引值显示盒子。（函数封装终于开始了~） * { margin: 0; padding: 0; } .box { width: 500px;
复制链接

扫一扫