精华内容
下载资源
问答
  • tab栏切换

    2020-03-30 22:16:46
    tab栏切换 tab栏切换在很多地方都有应用,无论是应用还是网页,所以在这里向大家介绍一种tab栏切换的做法。 HTML部分 <div class="tab"> <div class="tab_list"> <ul> <li class="current"&...

    tab栏切换

    tab栏切换在很多地方都有应用,无论是应用还是网页,所以在这里向大家介绍一种tab栏切换的做法。

    HTML部分

    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <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>
    

    css部分

    * {
      margin: 0;
       padding: 0;
    }
    li {
       list-style: none;
    }
    .tab {
       width: 1000px;
       margin: 100px auto;
    }
    .tab_list {
       height: 39px;
       border: 1px solid #ccc;
       background-color: #f1f1f1;
    }
    .tab_list li {
       float: left;
       height: 39px;
       line-height: 39px;
       text-align: center;
       padding: 0 20px;
       cursor: pointer;
    }
    .tab_list .current {
       background-color: #c81623;
       color: #fff;
    }
    .item {
       display: none;
    }
    

    JavaScript部分

    // 1、顶部tab切换,利用排他原理进行
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.getElementsByClassName('item');
    // 给每一个li注册点击事件
    for(var i = 0; i < lis.length; i++) {
        // 给每一个li上认为注册一个属性,为下面显示内容栏方便
        lis[i].setAttribute('data-index', i);
        lis[i].onclick = function() {
            // 利用排他原理,做出点击li色块移动
            for(var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'current';
    
            // 2、显示模块
            // 获取到被点击的li的index值
            var index = this.getAttribute('data-index');
            for(var i = 0; i<items.length; i++){
                items[i].style.display = 'none';
            }
            // 由于li与下面的item数量相当,可以利用index的值来表示第几个显示
            items[index].style.display = 'block';
        }
    }
    

    如果有其他的方法欢迎留言交流

    展开全文
  • Tab栏切换

    2020-09-22 13:25:40
    Tab栏切换 先循环给每个小li添加点击事件,并且在点击事件里,循环每个小li,让其他小li为未选中状态(排他),把自己为选中状态;但是在循环小li,没添加点击事件之前,先为小li添加自定义属性,方便之后为一一...

    Tab栏切换

     

    先循环给每个小li添加点击事件,并且在点击事件里,循环每个小li,让其他小li为未选中状态(排他),把自己为选中状态;但是在循环小li,没添加点击事件之前,先为小li添加自定义属性,方便之后为一一对应的模块做显示

    for (var i = 0; i < li.length; i++) {
                //循环给每个li添加自定义属性,方便一会显示对应的模块
                li[i].setAttribute('index', i)
                //在点击事件里,循环每个小li,让其他小li为未选中状态(排他),把自己为选中状态
                li[i].onclick = function () {
                    for (var i = 0; i < li.length; i++) {
                        li[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'
                }
            }

     

    展开全文
  • tab栏切换原理

    2020-08-31 01:12:18
    本文主要介绍了tab栏切换的原理以及实现方法代码。具有很好的参考价值。下面跟着小编一起来看下吧
  • Tab栏切换js

    2020-12-07 15:33:20
    Tab栏切换 参考代码

    Tab栏切换
    在这里插入图片描述参考代码
    在这里插入图片描述

    展开全文
  • js实现tab栏切换效果

    2020-11-20 00:06:55
    本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏...
  • 主要为大家详细介绍了JavaScript实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • TabLayout+ViewPager轻松搞定Tab栏切换,实现顶部和底部的tab栏切换
  • tab栏切换 小程序

    2020-07-18 17:00:20
    tab栏切换 小程序
    <view class="tab">
      <view class="tab-title">
          <view class="{{selected1?'border-tottom':'default'}}" bindtap="selected1">标题1</view>
          <view class="{{selected2?'border-tottom':'default'}}" bindtap="selected2">标题2</view>
      </view>
      <view class="tab-content">
          <view class="{{selected1?'show':'hidden'}}">内容1</view>
          <view class="{{selected2?'show':'hidden'}}">内容2</view>
      </view>
    </view>
    
    Page({
      data:{
        selected1:true,
        selected2:false
      },
      selected1:function(e){
        this.setData({
          selected1:true,
          selected2:false
        })
      },
      selected2: function (e) {
        this.setData({
          selected2: true,
          selected1: false
        })
      }
    })
    
    .tab-title{
      width:100%;
      height:50rpx;
      line-height:50rpx;
      display:flex;
      flex-direction: row;
    }
    .tab-title view{
      flex:auto;
      text-align:center;
    }
    .border-tottom{
      border-bottom:1rpx solid red;
    }
    .show{display:block;}
    .hidden{display:none;}
    
    展开全文
  • 主要介绍了js tab栏切换代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,227
精华内容 1,290
关键字:

tab栏切换