一些Tab栏

陈皮山药

已于 2023-03-14 23:13:12 修改

阅读量36

点赞数

文章标签： vue.js javascript 前端

于 2023-03-13 00:04:19 首次发布

本文链接：https://blog.csdn.net/qq_51794883/article/details/129483524

版权

vue版（写死的）

<template>
    <div class="max">
     <div class="tab">
    <div class="nav">
      <div class="btn" :class="{active : itemIndex == 1}" @click="btnClick(1)">全部(1700)</div>
      <div class="btn" :class="{active : itemIndex == 2}" @click="btnClick(2)">公告(500)</div>
      <div class="btn" :class="{active : itemIndex == 3}" @click="btnClick(3)">文档(600)</div>
      <div class="btn" :class="{active : itemIndex == 4}" @click="btnClick(4)">FAQ(100)</div>
    </div>
    <div class="detail">
      <div v-if="itemIndex == 1">
        <h1>全部</h1>
    </div>
      <div v-if="itemIndex == 2">
        <h1>公告</h1>
    </div>
      <div v-if="itemIndex == 3">
        <h1>文档</h1>
    </div>
      <div v-if="itemIndex == 4">
        <h1>FAQ</h1>
    </div>
    </div>
       </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      itemIndex: 1
    }
  },
  methods: {
    btnClick (index) {
      this.itemIndex = index
    }
  }
}
</script>

<style lang="less">
.tab{
    margin-top: 30px;
    // background: rgb(218, 218, 248);
    height:800px;
    .nav{
        width: 1200px;
        margin-left: 135px;
        display: flex;
        background-color: antiquewhite;
        padding-left: 160px;
     .btn {
      margin-right:30px;
      width: 90px;
      height:15px;
    //   border:1px solid;
      flex-direction: row;
      background-color:rgb(196, 219, 246) ;
      text-align: center;
    }
    .active{
        background:rgb(195, 240, 217);
    }
    }
    .detail{
        margin-top: 20px;
        margin-left: 300px;
        border:1px solid;
        width: 900px;
        height:600px;

    }
}

</style>

vue版（假数据版）

<div class="tab">
	 <div v-for="(item, index) in titleList" :key="item" class="btn" :class="{ active: itemIndex == index }" @click="btnClick(index)">{{ item }}()</div>
</div>



data() {
		return {
			titleList: ['全部', '文档', '公告', 'FAQ'],
			itemIndex: 0,
		}
	},
methods: {
		btnClick(index) {
			this.itemIndex = index
		}
	}

HTML版

<!DOCTYPE html>
    <html lang="en">   
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tab栏切换</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            .box {
                width: 600px;
                margin: 100px auto;
            }
            
            .box-top {
                overflow: hidden;
                width: 400px;
                background-color: whitesmoke;
            }
            
            .box-top ul li {
                float: left;
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                
            }
            
            .tab li.active {
                background-color: #ccc;
                color:peru;
            }
            
            .box-middle {
                margin-top: 0;
            }
            
            .box-middle .item {
                display: none;
                float: left;
            }

            .box-middle .item.active {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="box-top">
                <ul class="tab">
                    <li class="tab-item active">第一张</li>
                    <li class="tab-item">第二张</li>
                    <li class="tab-item">第三张</li>
                    <li class="tab-item">第四张</li>
                </ul>
            </div>

            <div class="box-middle">
                <div class="item active"> //默认展示页面
                   <a href="###"><img src="./image/1.jpg" alt=""></a>
                </div>
                <div class="item">
                    <a href="###"><img src="./image/2.jpg" alt=""></a>
                </div>
                <div class="item">
                    <a href="###"><img src="./image/3.jpg" alt=""></a>
                </div>
                <div class="item">
                    <a href="###"><img src="./image/4.jpg" alt=""></a>
                </div>
            </div>   
        </div>

        <script>  
             // 1、获取相应的元素
               let list = document.querySelectorAll('.tab .tab-item')
               let items = document.querySelectorAll('.box-middle .item')
               // 2、用for循环为tab栏所有元素添加点击事件 头部tab栏切换模块(排他思想)
               for (let i = 0; i < list.length; i++){
                     list[i].addEventListener('click',function(){
                        document.querySelector('.tab .active').classList.remove('active')
                        this.classList.add('active')
                // 3、底部显示隐藏模块 要放在点击事件的里边
                        // 3.1、先移除
                     document.querySelector('.box-middle .active').classList.remove('active')
                       // 3.2 点击哪个按钮就显示对应的底部模块
                       items[i].classList.add('active')  // 中间模块展示图片和上面的选项栏一一对应
                     })
               }
        </script>
    </body>
</html>