精华内容
下载资源
问答
  • 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>
        

    展开全文
  • 思路 一:通过接口获取路由配置(这个就不叙述了 不同得公司返回得东西都不太一样) 主要有以下几项 1.tabName 名字 2.path 链接 3.对应要加载组件得名称(根据这个去决定加载什么组件) 4是否是第一级得路由 这么...

    思路

    一:通过接口获取路由配置(这个就不叙述了 不同得公司返回得东西都不太一样)

    主要有以下几项
    1.tabName 名字
    2.path 链接
    3.对应要加载组件得名称(根据这个去决定加载什么组件)
    4是否是第一级得路由 这么一个字段

    二,添加

    添加一级路由
    // 1级路由
          let obj={
              path: "/login2",
              component:resolve =>require(['../page/login'],resolve),
              name:"登录2",
              meta: { title: "登录2"},
            }
            this.$router.options.routes.push(obj)
            //重新挂载路由
    this.$router.addRoutes(this.$router.options.routes)
    
    添加二级路由
    // 二级路由
          let obj1={
              path: "login2",
              component:resolve =>require(['../page/login'],resolve),
              name:"登录2",
              meta: { title: "登录2"},
            }
           for(let i in  this.$router.options.routes){
            if(this.$router.options.routes[i].name=='登录'){		//这个是判断放在哪个路由得二级下面
              if(this.$router.options.routes[i].children){
    
              }else{
                this.$router.options.routes[i].children=[]
                
              }
              this.$router.options.routes[i].children.push(obj1)
            }
          }
              //重新挂载路由
    this.$router.addRoutes(this.$router.options.routes)
    

    在这里插入图片描述

    展开全文
  • <script src="./vue.js"> .div { background - color: #ccc; height: 100px; width: 100px; float : left; margin - left: 10px; } .active { color: #f91; } < a v -bind:class="...
  • Vue tab栏颜色切换

    2020-12-05 15:43:28
  • 之前面试的时候被问到过如何使用vue实现tab栏切换高亮,今天自己写demo顺便记录一下 vue官方文档里有一个基础知识点叫做对象语法 v-bind:class={> //data如下 data: { isActive: true, hasError: false } //...
  • vue 实现 tab 切换

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

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

    千次阅读 2019-12-01 04:19:42
    一、显示隐藏切换(v-show) 二、组件之间的切换。 三、路由切换。(对地址和数据请求) ...利用vue中的特性自带属性keep-alive的缓存( keep-alive的属性有三个官网可以查看 ) 三、路由切换。对地址和数...
  • Vue制作tab栏切换 代码简直太简洁了 实现步骤如下: 1、实现静态UI效果 用传统的方式实现标签结构和样式 HTML结构 CSS样式 2、基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式,处理事件绑定...
  • 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> //...
  • vuetab栏切换

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

    2021-07-21 21:43:59
    div> div> div> <script > let vm=new Vue({ el:'#app', data:{ dy:['爱情','恐怖','动漫','戏剧'], seleted:'爱情' }, methods:{ change(value){ this.seleted=value } } }) /* 用vue实现tab选项卡 1.渲染界面 2....

空空如也

空空如也

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

vue的tab栏

vue 订阅