Skip to content

[js] 第140天 说说用原生js实现封装一个选项卡的功能 #1146

New issue
New issue
Open
Open
[js] 第140天 说说用原生js实现封装一个选项卡的功能#1146
Labels
jsJavaScript
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Sep 2, 2019 · edited by haizhilin2013
Collaborator

第140天 说说用原生js实现封装一个选项卡的功能

Activity

haizhilin2013
added
jsJavaScript
on Sep 2, 2019
467827183

467827183 commented on Sep 3, 2019

@467827183
467827183
on Sep 3, 2019

通过点击标签来切换选项页面的显示隐藏达成选项卡的效果

haizhilin2013
changed the title [-][js] 第140天 说用原生js实现封装一个选项卡的功能[/-] [+][js] 第140天 说说用原生js实现封装一个选项卡的功能[/+] on Sep 8, 2019
lm101845

lm101845 commented on Sep 28, 2020

@lm101845
lm101845
on Sep 28, 2020

Tab栏切换(重点)

这是一个重点案例，是前端人员的必备技能！！你必须要把这个案例给写会！！！！

案例分析

①Tab栏切换有2个大的模块

②上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

③下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。

④规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。

⑤核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。

（这个案例里面用到了自定义属性！！！！！！！！！！！！！！）

⑥ 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏（排他思想）

<script>
       var tab_list = document.querySelector('.tab_list');
       var lis = tab_list.querySelectorAll('li');

       for(var i = 0; i < lis.length; i++){
            lis[i].onclick = function(){
                for(var j = 0; j < lis.length; j++){
                    lis[j].className = '';
                }
                this.className = 'current';
            }
       }
    </script>

这个是做上面的模块所用的样式代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            /*这个是最大的盒子*/
            width: 978px;
            margin: 100px auto;
        }
        
        /*大盒子里的上盒子*/
        .tab_list {
            /*没给宽，默认和父亲一样宽*/
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item {
            /*也不保留位置*/
            display: none;
        }
    </style>
</head>

<body>
  	<!--大盒子叫tab,里面有上下2个盒子，一个叫tab_list，一个叫tab_con-->
  	<!--tab_list里面有5个li-->
    <!--tab_con里面有5个div-->
  	<!--5个li和5个div是一一对应的关系-->
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        
        <div class="tab_con">
            <!-- block除了有转为块级元素以外，还有显示的意思 -->
            <!-- 行内元素层级高，把上面的display:none给覆盖了 -->
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
        </div>
        
    </div>
    <script>
        //1. 上的模块选项卡:点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        /*5个li对应的是5个item*/
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
       
      	//里面有5个小li,必定要用循环
        //for循环绑定点击事件
        for(var i = 0; i < lis.length; i++){
            //开始给5个小li设置一个自定义属性：索引号index
            lis[i].setAttribute('index',i)
          	//所有的孩子都要有onclick绑定事件
            lis[i].onclick = function(){
                //排他思想：干掉所有人，其余的li清除class这个类
                for(var i = 0; i < lis.length; i++){
                    lis[i].className = '';
                }
                //留下我自己
                this.className = 'current';
                
                //2.下面的显示内容模块
              	//得到当前的属性的值
                var index = this.getAttribute('index');
                // console.log(index);
                //再用一次排他思想：干掉所有人，让其余的item 这些div隐藏
                for(var j = 0; j < items.length; j++){
                    items[j].style.display = 'none';
                }
                //留下我自己 让对应的item显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

这个是2个模块都完成的最终代码。(这个我独立写我也写不出来)

gengarwang

gengarwang commented on Mar 10, 2021

@gengarwang
gengarwang
on Mar 10, 2021
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tab</title>
</head>
<body>
  <div id="tab-box">
  </div>

  <div id="text-box">
  </div>
  
</body>

<script>
  var data = [
    {
      title: '首页',
      text: `
        <ul>
          <li>王者荣耀怎么氪金最具性价比</li>
          <li>如何评价《赘婿》大结局</li>
          <li>如何评价格里芬被活塞买断</li>
        </ul>
      `
    },
    {
      title: '视频',
      text: `
        <video autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
      `
    },
    {
      title: '消息',
      text: `
        哈哈哈哈, 我懒得写了
      `
    }
  ];

  var tabBoxEl = document.getElementById('tab-box'),
    textBoxEl = document.getElementById('text-box');
  var hash = location.hash ? location.hash.substring(1) : 0;

  data.forEach(({ title, text }, index) => {
    var tabEl = document.createElement('button');
    tabEl.innerText = title;
    tabEl.onclick = function () {
      textBoxEl.innerHTML = text;
      location.hash = index;
    };
    tabBoxEl.appendChild(tabEl);
    index == hash && tabEl.click();
  });
</script>

</html>
xiaoqiangz

xiaoqiangz commented on Jul 14, 2022

@xiaoqiangz
xiaoqiangz
on Jul 14, 2022

说下思路吧： 定义一个tab组件，里面有4个选项，每次点击一个选项，该选项卡会新增选中样式的class突出该选中效果利用dom.classList.add('active')，其余选项卡如果之前有被选中过需清除该class利用dom.classList.remove('active')，然后根据选中的选项卡显示当前需展示的内容块 利用display属性。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@xiaoqiangz@gengarwang@467827183@lm101845

        Issue actions
          [js] 第140天 说说用原生js实现封装一个选项卡的功能 · Issue #1146 · haizlin/fe-interview