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

    2021-03-22 16:02:29
    vueTab栏切换 <template> <div class="Materials_cn"> <div class="curriculum" v-for="(item, index) in getAllAttachment" :key="index" > <!-- tab栏 --> <div class=...

    vueTab栏切换

    <template>
      <div class="Materials_cn">
        <div
          class="curriculum"
          v-for="(item, index) in getAllAttachment"
          :key="index"
        >
          <!-- tab栏 -->
          <div class="curriculum_item">
            <div class="tab" :class="cur == 0 ? 'onstyles' : ''" @click="cur = 0">
              <img src="../../assets/images/icon1.png" alt="" />
              <span class="">课程资料</span>
            </div>
            <div
              class="tab"
              style="padding-left: 31px"
              @click="cur = 1"
              :class="cur == 1 ? 'onstyles' : ''"
            >
              <img src="../../assets/images/icon2.png" alt="" />
              <span>辅导教师共享资料</span>
            </div>
          </div>
    
          <!-- 课程资料 -->
          <div class="curriculum_cn" v-show="cur == 0">
            <div class="curriculum_pic">
              <div class="curriculum_bgi">
                <div class="curriculum_icon">
                  <img src="../../assets/images/icon3.png" alt="" />
                  <span>下载</span>
                </div>
              </div>
              <div class="curr_text1">{{ item.title }}</div>
              <div class="curr_text2">
                {{ item.description }}
              </div>
            </div>
          </div>
          <!-- 课程资料 -->
          <div class="curriculum_cn" v-show="cur == 1">
            <div class="curriculum_pic">
              <div class="curriculum_bgi">
                <div class="curriculum_icon">
                  <img src="../../assets/images/icon3.png" alt="" />
                  <span>下载</span>
                </div>
              </div>
              <div class="curr_text1">{{ item.title }}</div>
              <div class="curr_text2">
                {{ item.description }}
              </div>
            </div>
          </div>
          <div class="fooler">
            <div class="fooler_text">本门课程暂无专家介绍</div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          getAllAttachment: {},
          cur: 0,
        };
      },
      created() {
        this.materialList();
      },
      methods: {
        materialList() {
          console.log("123456");
          this.http
            .get(this.apis.courseMaterial.getAllAttachment, {
              // userId: this.appUtils.getUserId(),
              researchId: this.appUtils.getResearchId(),
            })
            .then((res) => {
              this.getAllAttachment = res.data;
              console.log(res);
            })
            .catch((err) => {
              this.$message.error("请求失败!!");
            });
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .Materials_cn {
      min-width: 1920px;
      height: 100%;
      background-color: #fff;
      text-align: left;
      .curriculum {
        min-width: 1200px;
        padding-left: 310px;
        padding-top: 56px;
        .curriculum_item {
          width: 1200px;
          display: flex;
          border-bottom: 1px solid #e2e2e2;
          /deep/.onstyles {
            min-width: 112px;
            height: 40px;
            border-bottom: 3px solid #30967d;
            span {
              font-size: 18px;
              font-family: PingFang SC, PingFang SC-Bold;
              font-weight: 700;
              color: #30967d;
            }
          }
          .tab {
            display: flex;
            justify-content: center;
            cursor: pointer;
    
            img {
              width: 24px;
              height: 24px;
            }
            span {
              font-size: 16px;
              font-family: PingFang SC, PingFang SC-Bold;
              font-weight: 700;
              color: #999999;
              padding-left: 6px;
            }
          }
        }
      }
      .curriculum_cn {
        width: 1024px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .curriculum_pic {
          width: 328px;
          padding-top: 35px;
          .curriculum_bgi {
            position: relative;
            width: 328px;
            height: 186px;
            background: url(../../assets/images/bgi3.png) no-repeat;
            background-size: 328px 186px;
            .curriculum_icon {
              position: absolute;
              right: 8px;
              bottom: 11px;
              width: 88px;
              height: 32px;
              opacity: 0.8;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #000;
              border-radius: 4px;
              img {
                width: 14px;
                height: 14px;
                padding-right: 5px;
              }
              span {
                font-size: 14px;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                color: #ffffff;
              }
            }
          }
          .curr_text1 {
            padding: 16px 0 6px 0;
            font-size: 18px;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            text-align: left;
            color: #333333;
          }
          .curr_text2 {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
          }
        }
      }
      .fooler {
        width: 1103px;
        height: 195px;
        margin-top: 40px;
        background: #f4f6f8 url(../../assets/images/bgi2.png) no-repeat;
        background-size: 370px 182px;
        background-position: 580px 0;
        .fooler_text {
          display: flex;
          justify-content: center;
          padding: 88px 0;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          color: #666666;
        }
      }
    }
    </style>
    ```javascript
    
    
    
    
    展开全文
  • vue tab栏切换

    2021-02-02 14:49:07
    vue tab栏切换 <template> <div> <div class="tab" v-for="item in tabDatas" @click="checkTab(item)"> <div>{{item.name}}</div> <div>{{item.description}}</div>...

    vue tab栏切换

    <template>
      <div>
          <div class="tab" v-for="item in tabDatas" @click="checkTab(item)" :class="[checkTabDatas.id == item.id ? 'bg_have_color' : '']">
              <div>{{item.name}}</div>
              <div>{{item.description}}</div>
          </div>
          <div v-for="item in checkTabDatas.childrens">
              <div>{{item.title}}</div>
              <div>{{item.description}}</div>
          </div>
      </div>
    </template>
    
    <script type="text/javascript">
    export default {
        data() {
            return {
                checkTabDatas: [],
                tabDatas: [
                    {
                        name: "真机调试",
                        description: "描述 描述 描述",
                        childrens: [
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            }
                        ]
                    },
                    {
                        name: "兼容测试",
                        description: "描述 描述 描述",
                        childrens: [
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            }
                        ]
                    },
                    {
                        name: "性能测试",
                        description: "描述 描述 描述",
                        childrens: [
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            }
                        ]
                    },
                    {
                        name: "功能测试",
                        description: "描述 描述 描述",
                        childrens: [
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            }
                        ]
                    },
                    {
                        name: "生命周期测试",
                        description: "描述 描述 描述",
                        childrens: [
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            }
                        ]
                    },
                    {
                        name: "完全测试",
                        description: "描述 描述 描述",
                        childrens: [
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            },
                            {
                                title: '机型强大',
                                description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                            }
                        ]
                    }
                ]
            }
        },
        mounted() {
            this.checkTabDatas = this.tabDatas[0].childrens;
        },
        methods: {
            checkTab(item){
            	//选中对应的childrend对象,动态放入checkTabDatas 
                this.checkTabDatas = item.childrens;
            }
        }
    }
    </script>
    
    展开全文
  • Vue tab栏切换增强版

    2019-11-09 14:55:42
    Vue tab栏切换增强版 tab栏切换增强版 题目描述 点击tab栏 内容区域显示对应的内容 如 点击 SECTION 1 则 内容区域显示 对应 SECTION 1 的内容 同时当前 SECTION的字体颜色变成蓝色 训练目标 能够理解vue 中...

    Vue tab栏切换增强版

    tab栏切换增强版

    • 题目描述

      • 点击tab栏 内容区域显示对应的内容
      • 如 点击 SECTION 1 则 内容区域显示 对应 SECTION 1 的内容 同时当前 SECTION的字体颜色变成蓝色
    • 训练目标

      • 能够理解vue 中的数据渲染
      • 能够理解 v-for, v-if , v-bind , v-click 的使用
      • 能够理解 vue 中调用函数的时候传递参数
    • 训练提示

      • 提供的数据如下

        1、	数据
           list: [{
                       id: 1,
                       title: 'Section 1',
                       content: 'content1'
                     }, {
                        id: 2,
                        title: 'Section 2',
                        content: 'content2'
                     }, {
                         id: 3,
                         title: 'Section 3',
                         content: 'content3'
                     }, {
                         id: 4,
                         title: 'Section 4',
                         content: 'content4'
                     }, {
                         id: 5,
                         title: 'Section 5',
                         content: 'content5'
                     }, {
                         id: 6,
                         title: 'Section 6',
                         content: 'content6'
                     }]   
        
        2、 HTML 结构如下 
        <div id="app" class="vertical-tab">
            <!-- 左侧tab栏 -->
            <ul class="nav nav-tabs1">
                <li class="active"><a href="#"> Section 1 </a></li>
                <li class=""><a href="#"> Section 2 </a></li>
                <li class=""><a href="#"> Section 3 </a></li>
        	</ul>
        	<!-- 内容区域 -->
            <div class="tab-content tabs">
                <div class="tab-pane  fade active">
                    <h3>Section 1</h3>
                    <p>content1</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 2</h3>
                    <p>content2</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 3</h3>
                    <p>content3</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 4</h3>
                    <p>content4</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 5</h3>
                    <p>content5</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 6</h3>
                    <p>content6</p>
                </div>
            </div>
            <ul class="nav nav-tabs2">
                <!-- 右侧tab栏 -->
                <li class=""><a href="#"> Section 4 </a></li>
                <li class=""><a href="#"> Section 5 </a></li>
                <li class=""><a href="#"> Section 6 </a></li>
            </ul>
        </div>          
                     
        
      • 第一步: 将 list 中的数据title 渲染到 左侧和 右侧的tab栏中

        • 注意: 左右各渲染3条数据
      • 第二步: 将 list 中的数据title 和 content 渲染到 内容区域

      • 第三步: 给左侧的tab栏中的li绑定事件 实现动态切换active 类名

        • 注意: 给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
        • 其他 li 需要移除类名 active
      • 第四步: 拿到当前点击li的索引 让 内容区域中 对应索引类名是 tab-pane 的 div 显示

        • 注意: 给 类名是 tab-pane 的 div 添加 类名 active 即可让当前div 显示出来 (类名是 active的样式已经在CSS中提前定义好 )
        • 其他 tab-pane 的 div 需要移除类名 active
      • 第五步: 给右侧的tab栏中的li绑定事件 实现动态切换active 类名

        • 注意: 给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
      • 第六步: 拿到当前点击li的索引 让 内容区域中 对应索引类名是 tab-pane 的 div 显示

        • 注意: 这里需要注意索引问题:
          • 点击右侧第一个div 的时候 需要让内容区域中的第 4个 div 显示出来
          • 点击右侧第2个div 的时候 需要让内容区域中的第 5个 div 显示出来
    • 操作步骤

      • HTML

        <div id="app" class="vertical-tab">
            <!-- 左侧tab栏 -->
            <ul class="nav nav-tabs1">
                <li class="active"><a href="#"> Section 1 </a></li>
                <li class=""><a href="#"> Section 2 </a></li>
                <li class=""><a href="#"> Section 3 </a></li>
        	</ul>
        	<!-- 内容区域 -->
            <div class="tab-content tabs">
                <div class="tab-pane  fade active">
                    <h3>Section 1</h3>
                    <p>content1</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 2</h3>
                    <p>content2</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 3</h3>
                    <p>content3</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 4</h3>
                    <p>content4</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 5</h3>
                    <p>content5</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 6</h3>
                    <p>content6</p>
                </div>
            </div>
            <ul class="nav nav-tabs2">
                <!-- 右侧tab栏 -->
                <li class=""><a href="#"> Section 4 </a></li>
                <li class=""><a href="#"> Section 5 </a></li>
                <li class=""><a href="#"> Section 6 </a></li>
            </ul>
        </div>       
        
      • CSS

          <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .vertical-tab {
                    width: 920px;
                    margin: 100px auto;
                }
                
                .vertical-tab .nav {
                    list-style: none;
                    width: 200px;
                }
                
                .vertical-tab .nav-tabs1 {
                    border-right: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav-tabs2 {
                    border-left: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav a {
                    display: block;
                    font-size: 18px;
                    font-weight: 700;
                    text-align: center;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    padding: 10px 20px;
                    margin: 0 0 1px 0;
                    text-decoration: none;
                }
                
                .vertical-tab .tab-content {
                    color: #555;
                    background-color: #fff;
                    font-size: 15px;
                    letter-spacing: 1px;
                    line-height: 23px;
                    padding: 10px 15px 10px 25px;
                    display: table-cell;
                    position: relative;
                }
                
                .vertical-tab .nav-tabs1 {
                    float: left;
                }
                
                .vertical-tab .tabs {
                    width: 500px;
                    box-sizing: border-box;
                    float: left;
                }
                
                .vertical-tab .tab-content h3 {
                    font-weight: 600;
                    text-transform: uppercase;
                    margin: 0 0 5px 0;
                }
                
                .vertical-tab .nav-tabs2 {
                    float: right;
                }
                
                .tab-content .tab-pane {
                    display: none;
                }
                
                .tab-content .tab-pane.active {
                    display: block;
                }
        </style>
        
      • data 中的数据

        	     list: [{
                          id: 1,
                          title: 'Section 1',
                          content: 'content1'
                        }, {
                           id: 2,
                           title: 'Section 2',
                           content: 'content2'
                        }, {
                            id: 3,
                            title: 'Section 3',
                            content: 'content3'
                        }, {
                            id: 4,
                            title: 'Section 4',
                            content: 'content4'
                        }, {
                            id: 5,
                            title: 'Section 5',
                            content: 'content5'
                        }, {
                            id: 6,
                            title: 'Section 6',
                            content: 'content6'
                        }]   
        
        完整案例
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .vertical-tab {
                    width: 920px;
                    margin: 100px auto;
                }
                
                .vertical-tab .nav {
                    list-style: none;
                    width: 200px;
                }
                
                .vertical-tab .nav-tabs1 {
                    border-right: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav-tabs2 {
                    border-left: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav a {
                    display: block;
                    font-size: 18px;
                    font-weight: 700;
                    text-align: center;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    padding: 10px 20px;
                    margin: 0 0 1px 0;
                    text-decoration: none;
                }
                
                .vertical-tab .tab-content {
                    color: #555;
                    background-color: #fff;
                    font-size: 15px;
                    letter-spacing: 1px;
                    line-height: 23px;
                    padding: 10px 15px 10px 25px;
                    display: table-cell;
                    position: relative;
                }
                
                .vertical-tab .nav-tabs1 {
                    float: left;
                }
                
                .vertical-tab .tabs {
                    width: 500px;
                    box-sizing: border-box;
                    float: left;
                }
                
                .vertical-tab .tab-content h3 {
                    font-weight: 600;
                    text-transform: uppercase;
                    margin: 0 0 5px 0;
                }
                
                .vertical-tab .nav-tabs2 {
                    float: right;
                }
                
                .tab-content {
                    position: relative;
                }
                
                .tab-content .tab-pane {
                    position: absolute;
                    top: 10px;
                    left: 20px;
                }
                
                .nav li.active a {
                    color: #198df8;
                    background: #fff;
                    border: none;
                }
                
                .fade {
                    opacity: 0;
                    transition: all .3s linear;
                }
                
                .fade.active {
                    opacity: 1;
                }
            </style>
        </head>
        
        <body>
            <div class="vertical-tab" id="app">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs1">
                    <li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#"> {{item.title}} </a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div class="tab-pane  fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'>
                        <h3>{{item.title}}</h3>
                        <p>{{item.content}}</p>
                    </div>
        
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs2">
                    <li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#"> {{item.title}} </a></li>
                </ul>
            </div>
            <script type="text/javascript" src="js/vue.js"></script>
            <script>
                new Vue({
                    el: "#app",
                    data: {
                        currentIndex: 0, // 选项卡当前的索引
                        list: [{
                            id: 1,
                            title: 'Section 1',
                            content: 'content1'
                        }, {
                            id: 2,
                            title: 'Section 2',
                            content: 'content2'
                        }, {
                            id: 3,
                            title: 'Section 3',
                            content: 'content3'
                        }, {
                            id: 4,
                            title: 'Section 4',
                            content: 'content4'
                        }, {
                            id: 5,
                            title: 'Section 5',
                            content: 'content5'
                        }, {
                            id: 6,
                            title: 'Section 6',
                            content: 'content6'
                        }]
                    },
                    methods: {
                        change(index, flag) {
                            if (flag) {
                                console.log(index)
                                this.currentIndex = index;
                            } else {
                                this.currentIndex = index;
                            }
        
                        }
                    }
        
                })
            </script>
        </body>
        

    tab栏切换增强版

    • 题目描述

      • 点击tab栏 内容区域显示对应的内容
      • 如 点击 SECTION 1 则 内容区域显示 对应 SECTION 1 的内容 同时当前 SECTION的字体颜色变成蓝色
    • 训练目标

      • 能够理解vue 中的数据渲染
      • 能够理解 v-for, v-if , v-bind , v-click 的使用
      • 能够理解 vue 中调用函数的时候传递参数
    • 训练提示

      • 提供的数据如下

        1、	数据
           list: [{
                       id: 1,
                       title: 'Section 1',
                       content: 'content1'
                     }, {
                        id: 2,
                        title: 'Section 2',
                        content: 'content2'
                     }, {
                         id: 3,
                         title: 'Section 3',
                         content: 'content3'
                     }, {
                         id: 4,
                         title: 'Section 4',
                         content: 'content4'
                     }, {
                         id: 5,
                         title: 'Section 5',
                         content: 'content5'
                     }, {
                         id: 6,
                         title: 'Section 6',
                         content: 'content6'
                     }]   
        
        2、 HTML 结构如下 
        <div id="app" class="vertical-tab">
            <!-- 左侧tab栏 -->
            <ul class="nav nav-tabs1">
                <li class="active"><a href="#"> Section 1 </a></li>
                <li class=""><a href="#"> Section 2 </a></li>
                <li class=""><a href="#"> Section 3 </a></li>
        	</ul>
        	<!-- 内容区域 -->
            <div class="tab-content tabs">
                <div class="tab-pane  fade active">
                    <h3>Section 1</h3>
                    <p>content1</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 2</h3>
                    <p>content2</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 3</h3>
                    <p>content3</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 4</h3>
                    <p>content4</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 5</h3>
                    <p>content5</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 6</h3>
                    <p>content6</p>
                </div>
            </div>
            <ul class="nav nav-tabs2">
                <!-- 右侧tab栏 -->
                <li class=""><a href="#"> Section 4 </a></li>
                <li class=""><a href="#"> Section 5 </a></li>
                <li class=""><a href="#"> Section 6 </a></li>
            </ul>
        </div>          
                     
        
      • 第一步: 将 list 中的数据title 渲染到 左侧和 右侧的tab栏中

        • 注意: 左右各渲染3条数据
      • 第二步: 将 list 中的数据title 和 content 渲染到 内容区域

      • 第三步: 给左侧的tab栏中的li绑定事件 实现动态切换active 类名

        • 注意: 给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
        • 其他 li 需要移除类名 active
      • 第四步: 拿到当前点击li的索引 让 内容区域中 对应索引类名是 tab-pane 的 div 显示

        • 注意: 给 类名是 tab-pane 的 div 添加 类名 active 即可让当前div 显示出来 (类名是 active的样式已经在CSS中提前定义好 )
        • 其他 tab-pane 的 div 需要移除类名 active
      • 第五步: 给右侧的tab栏中的li绑定事件 实现动态切换active 类名

        • 注意: 给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
      • 第六步: 拿到当前点击li的索引 让 内容区域中 对应索引类名是 tab-pane 的 div 显示

        • 注意: 这里需要注意索引问题:
          • 点击右侧第一个div 的时候 需要让内容区域中的第 4个 div 显示出来
          • 点击右侧第2个div 的时候 需要让内容区域中的第 5个 div 显示出来
    • 操作步骤

      • HTML

        <div id="app" class="vertical-tab">
            <!-- 左侧tab栏 -->
            <ul class="nav nav-tabs1">
                <li class="active"><a href="#"> Section 1 </a></li>
                <li class=""><a href="#"> Section 2 </a></li>
                <li class=""><a href="#"> Section 3 </a></li>
        	</ul>
        	<!-- 内容区域 -->
            <div class="tab-content tabs">
                <div class="tab-pane  fade active">
                    <h3>Section 1</h3>
                    <p>content1</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 2</h3>
                    <p>content2</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 3</h3>
                    <p>content3</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 4</h3>
                    <p>content4</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 5</h3>
                    <p>content5</p>
                </div>
                <div class="tab-pane  fade">
                    <h3>Section 6</h3>
                    <p>content6</p>
                </div>
            </div>
            <ul class="nav nav-tabs2">
                <!-- 右侧tab栏 -->
                <li class=""><a href="#"> Section 4 </a></li>
                <li class=""><a href="#"> Section 5 </a></li>
                <li class=""><a href="#"> Section 6 </a></li>
            </ul>
        </div>       
        
      • CSS

          <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .vertical-tab {
                    width: 920px;
                    margin: 100px auto;
                }
                
                .vertical-tab .nav {
                    list-style: none;
                    width: 200px;
                }
                
                .vertical-tab .nav-tabs1 {
                    border-right: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav-tabs2 {
                    border-left: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav a {
                    display: block;
                    font-size: 18px;
                    font-weight: 700;
                    text-align: center;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    padding: 10px 20px;
                    margin: 0 0 1px 0;
                    text-decoration: none;
                }
                
                .vertical-tab .tab-content {
                    color: #555;
                    background-color: #fff;
                    font-size: 15px;
                    letter-spacing: 1px;
                    line-height: 23px;
                    padding: 10px 15px 10px 25px;
                    display: table-cell;
                    position: relative;
                }
                
                .vertical-tab .nav-tabs1 {
                    float: left;
                }
                
                .vertical-tab .tabs {
                    width: 500px;
                    box-sizing: border-box;
                    float: left;
                }
                
                .vertical-tab .tab-content h3 {
                    font-weight: 600;
                    text-transform: uppercase;
                    margin: 0 0 5px 0;
                }
                
                .vertical-tab .nav-tabs2 {
                    float: right;
                }
                
                .tab-content .tab-pane {
                    display: none;
                }
                
                .tab-content .tab-pane.active {
                    display: block;
                }
        </style>
        
      • data 中的数据

        	     list: [{
                          id: 1,
                          title: 'Section 1',
                          content: 'content1'
                        }, {
                           id: 2,
                           title: 'Section 2',
                           content: 'content2'
                        }, {
                            id: 3,
                            title: 'Section 3',
                            content: 'content3'
                        }, {
                            id: 4,
                            title: 'Section 4',
                            content: 'content4'
                        }, {
                            id: 5,
                            title: 'Section 5',
                            content: 'content5'
                        }, {
                            id: 6,
                            title: 'Section 6',
                            content: 'content6'
                        }]   
        
        完整案例
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .vertical-tab {
                    width: 920px;
                    margin: 100px auto;
                }
                
                .vertical-tab .nav {
                    list-style: none;
                    width: 200px;
                }
                
                .vertical-tab .nav-tabs1 {
                    border-right: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav-tabs2 {
                    border-left: 3px solid #e7e7e7;
                }
                
                .vertical-tab .nav a {
                    display: block;
                    font-size: 18px;
                    font-weight: 700;
                    text-align: center;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    padding: 10px 20px;
                    margin: 0 0 1px 0;
                    text-decoration: none;
                }
                
                .vertical-tab .tab-content {
                    color: #555;
                    background-color: #fff;
                    font-size: 15px;
                    letter-spacing: 1px;
                    line-height: 23px;
                    padding: 10px 15px 10px 25px;
                    display: table-cell;
                    position: relative;
                }
                
                .vertical-tab .nav-tabs1 {
                    float: left;
                }
                
                .vertical-tab .tabs {
                    width: 500px;
                    box-sizing: border-box;
                    float: left;
                }
                
                .vertical-tab .tab-content h3 {
                    font-weight: 600;
                    text-transform: uppercase;
                    margin: 0 0 5px 0;
                }
                
                .vertical-tab .nav-tabs2 {
                    float: right;
                }
                
                .tab-content {
                    position: relative;
                }
                
                .tab-content .tab-pane {
                    position: absolute;
                    top: 10px;
                    left: 20px;
                }
                
                .nav li.active a {
                    color: #198df8;
                    background: #fff;
                    border: none;
                }
                
                .fade {
                    opacity: 0;
                    transition: all .3s linear;
                }
                
                .fade.active {
                    opacity: 1;
                }
            </style>
        </head>
        
        <body>
            <div class="vertical-tab" id="app">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs1">
                    <li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#"> {{item.title}} </a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div class="tab-pane  fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'>
                        <h3>{{item.title}}</h3>
                        <p>{{item.content}}</p>
                    </div>
        
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs2">
                    <li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#"> {{item.title}} </a></li>
                </ul>
            </div>
            <script type="text/javascript" src="js/vue.js"></script>
            <script>
                new Vue({
                    el: "#app",
                    data: {
                        currentIndex: 0, // 选项卡当前的索引
                        list: [{
                            id: 1,
                            title: 'Section 1',
                            content: 'content1'
                        }, {
                            id: 2,
                            title: 'Section 2',
                            content: 'content2'
                        }, {
                            id: 3,
                            title: 'Section 3',
                            content: 'content3'
                        }, {
                            id: 4,
                            title: 'Section 4',
                            content: 'content4'
                        }, {
                            id: 5,
                            title: 'Section 5',
                            content: 'content5'
                        }, {
                            id: 6,
                            title: 'Section 6',
                            content: 'content6'
                        }]
                    },
                    methods: {
                        change(index, flag) {
                            if (flag) {
                                console.log(index)
                                this.currentIndex = index;
                            } else {
                                this.currentIndex = index;
                            }
        
                        }
                    }
        
                })
            </script>
        </body>
        

    展开全文
  • vue 实现 tab 栏切换

    2020-11-01 23:54:47
    小段视频展示tab栏效果 ... tab栏切换演示.wmv 代码展示: <template> <div class="tab"> <div class="tabwrapper" @mouseleave="handleleave"> <div class="left"> <ul>

    小段视频展示tab栏效果

    tab栏切换演示.wmv

    代码展示:

    <template>
      <div class="tab">
        <div class="tabwrapper" @mouseleave="handleleave">
          <div class="left">
            <ul>
              <li
                v-for="(item, index) of citylist"
                :key="index"
                @mouseenter="handleenter(index)"
                :class="{
                  active: currentindex == index,
                }"
              >
                <span>{{ item.type }}</span
                ><i></i>
              </li>
            </ul>
          </div>
          <div class="right" v-if="isshow">
            <ul>
              <li v-for="(v, i) of citylist[currentindex].children" :key="i">
                <strong>{{ i + 1 }}</strong>
                <span>{{ v.city }}</span>
                <i>{{ v.desc }}</i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data: function () {
        return {
          isshow: false,
          currentindex: 99,
          citylist: [],
        };
      },
      created: function () {
        this.getcity();
      },
      methods: {
        handleenter: function (index) {
          this.currentindex = index;
          this.isshow = true;
        },
        handleleave: function () {
          this.currentindex = 99;
          this.isshow = false;
        },
        getcity: function () {
          this.$axios({
            url: "/posts/cities",
          }).then((res) => {
            console.log(res.data);
            this.citylist = res.data.data;
          });
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .tab {
      padding: 200px 40px;
    }
    .tabwrapper {
      box-sizing: border-box;
      position: relative;
      width: 620px;
      .left {
        position: relative;
        box-sizing: border-box;
        width: 260px;
        border: 1px solid #999;
        border-right: none;
        border-bottom: none;
        z-index: 2;
        ul > li {
          box-sizing: border-box;
          width: 260px;
          height: 41px;
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-right: 1px solid #999;
          border-bottom: 1px solid #999;
          &.active {
            border-right-color: #fff;
            color: orange;
            i {
              border-color: orange;
            }
          }
          // &:hover {
          // color: orange;
          // border-right-color: #fff;
          //   i {
          //     border-color: orange;
          //   }
          // }
          i {
            width: 14px;
            height: 14px;
            border-top: 1px solid #999;
            border-right: 1px solid #999;
            transform: rotate(45deg);
          }
        }
      }
      .right {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 260px;
        border: 1px #999 solid;
    
        ul > li {
          width: 360px;
          height: 42px;
          display: flex;
          align-items: center;
          strong {
            display: inline-block;
            margin-left: 20px;
            color: orange;
          }
          span {
            display: inline-block;
            margin-left: 20px;
            color: orange;
          }
          i {
            display: inline-block;
            margin-left: 20px;
          }
        }
      }
    }
    </style>
    

    完成tab栏切换的注意点:

    1. 用mouseenter
    mouseover与mouseenter的区别
    Mouseover:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。mouseover/mouseout事件支持冒泡,绑定的事件会冒泡到子标签上。
    Mouseenter:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

    2.要实现点击左边的li,右边框消失,利用左边的盒子的右边框与右边的盒子的左边框重叠,左边的盒子的z-index更大。
    在这里插入图片描述

    &.active {
            border-right-color: #fff;
            color: orange;
            i {
              border-color: orange;
            }
          }
    
    展开全文
  • vuetab栏切换使用

    2020-12-27 17:34:28
    vuetab栏切换使用 以下引入三方库ly-tab的使用,安装使用即可 <template> <div> <ly-tab v-model="selectedId" :items = "items" :options="options" @change="handleChange" > </...
  • 在项目开发中遇到这样需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,实现方法其实很简单的,下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功能,需要...
  • Vue实现Tab栏切换

    2020-05-25 15:07:55
    @click绑定事件 添加单击事件切换Tab栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
  • Vue制作tab栏切换 代码简直太简洁了 实现步骤如下: 1、实现静态UI效果 用传统的方式实现标签结构和样式 HTML结构 CSS样式 2、基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式,处理事件绑定...
  • vuetab栏切换总结

    千次阅读 2019-12-01 04:19:42
    一、显示隐藏切换(v-show) 二、组件之间的切换。 三、路由切换。(对地址和数据请求) ...利用vue中的特性自带属性keep-alive的缓存( keep-alive的属性有三个官网可以查看 ) 三、路由切换。对地址和数...
  • vue路由tab栏切换

    2020-10-18 20:44:17
    app.vue <template> <div> <router-link to="/logoin">登录</router-link> <router-link to="/header">首页</router-link> <router-view> </router-view> //...
  • VUE简易tab栏切换

    2020-09-01 18:31:18
    * { margin: 0; padding: 0; border: 0; list-style: none; } .app { margin: 0 auto; } .tab { width: 200px; height: 30px; overflow: hidden; } li { ...
  • vue实现tab栏切换

    2019-08-17 14:31:54
    先看下效果图: 实现思路: 点击哪个切换哪个,通过控制class类来切换的。 代码: ...ul class="tab_list"> <li v-for="(item,index) in tabList" :key="index" @click='exchangeTab(...
  • vuetab栏切换

    2020-11-18 23:33:09
    } 扩展知识,在我做的项目中:关于tab栏切换文章详情代码 1.tab栏代码 推荐 {{ item.className }} 2.文章详情页对应 {{ item.username }} {{ item.updateTime | formatTime }} {{ item.articalName }} 3.引入方法接口...
  • vue实现tab栏切换组件

    千次阅读 2019-03-22 17:15:52
    {{item.name}} vue中 is 属性的特性就是使用 is 属性的标签会以 is 的属性值来渲染当前标签 例如:我们只能在 ul 中包裹 li ,但是我们可以给 li 添加 is 属性来决定 li 渲染的哪个组件

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 227
精华内容 90
关键字:

vuetab栏切换

vue 订阅