Java教程

JavaScript——tab栏切换效果的实现

本文主要是介绍JavaScript——tab栏切换效果的实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

具体代码如下:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .d1{
        margin: 100px auto;
        width: 638px;
    }
    .d2{
        height: 39px;
        border: 1px solid #ccc;
        background-color: #CCCCCC;
    }
    .d2 li{
        float:left;
        height: 39px;
        padding: 0 30px;
        line-height: 39px;
        text-align: center;
        cursor: pointer;
    }
    .current{
        background-color: #f3313b;
        color: black;
    }
    li{
        list-style-type: none;
    }
    .item{
        display: none;
    }

</style>
<div class="d1">
    <div class="d2">
        <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
        </ul>
    </div>`
    
    <div class="d3">
        <div class="item" style="display: block">商品介绍模块</div>
        <div class="item">规格与包装模块</div>
        <div class="item">售后保障模块</div>
        <div class="item">商品评价模块</div>
        <div class="item">手机社区模块</div>
    </div>
</div>
<script>
    var lis=document.querySelector('.d2').querySelectorAll('li');
    var item=document.querySelectorAll('.item')
    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i);
        lis[i].onclick=function (){
            for(var i=0;i<lis.length;i++){
                lis[i].className='';
            }
            this.className='current';
            var index =this.getAttribute('index');
            for(var i=0;i<item.length;i++){
                item[i].style.display='none';
            }
            item[index].style.display='block';
        }
    }
</script>
</body>
</html>

结果图如下:
在这里插入图片描述在这里插入图片描述
下面讲一下js代码的具体实现过程,首先来实现上面的导航栏的切换功能,先要获取点击事件的事件源,刚开始先给导航栏的第一个部分显示为点击状态,建立一个class类名,给导航栏添加点击事件,内容比较多,所以用for循环来实现,每当点击一个导航,将该导航的样式设置为选中的样式,这样设置后你会发现一个问题,虽然点击的部分已经显示为选中状态,但是点击过的部分也显示为选中状态,所以要在每次修改之前把所有的部分都设置为未选中状态(排他思想),这样就可以实现了。
接着说在导航栏选中时怎样把相应的内容显示出来,这时候我们要给导航栏的每一个标签设置一个自定义属性,从而实现导航栏与内容的相互对应,类似的这也需要要排他思想。
以上就是这个效果的简单介绍,具体代码如上,欢迎指正学习!

这篇关于JavaScript——tab栏切换效果的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!