实现tab切换效果

最新推荐文章于 2022-05-01 13:20:17 发布

Ylk_IT

最新推荐文章于 2022-05-01 13:20:17 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/ylk_manong/article/details/118612948

版权

原生实现tab切换效果

style部分

	<style>
	    #title span.select{
	        background: red;
	    }
	    #list li{
	        display: none;
	    }
	    #list li.show{
	        display: block;
	    }
	</style>

body部分

<div id="title">
        <span class="select">标题1</span>
        <span>标题2</span>
        <span>标题3</span>
        <span>标题4</span>
    </div>
    <ul id="list">
        <li class="show">内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
    </ul>

js部分

<script>
        var titles=document.querySelectorAll('#title span');
        var cons=document.querySelectorAll('#list li');

        for(var i=0;i<titles.length;i++){
            titles[i].onclick=function(){
               
                for(var m=0;m<titles.length;m++){
                    if(this==titles[m]){
                        this.classList.add('select');
                        cons[m].classList.add('show');
                    }else{
                        titles[m].classList.remove('select');
                        cons[m].classList.remove('show');
                    }
                }
               
            }
        }
    </script>