实现tab切换效果

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

原创最新推荐文章于 2022-05-01 13:20:17 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用纯CSS和JavaScript为网页创建简单的Tab切换效果，包括样式的设置和JavaScript事件监听，适合初学者快速上手。

原生实现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>