css内容切换

最新推荐文章于 2024-07-16 19:35:54 发布

Magic_小小阿昕

最新推荐文章于 2024-07-16 19:35:54 发布

阅读量452

点赞数

分类专栏： Vue 文章标签： css内容切换

本文链接：https://blog.youkuaiyun.com/Amo__/article/details/100890597

版权

Vue 专栏收录该内容

0 篇文章

订阅专栏

本文展示了一种基于Vue.js的内容切换实现方案，通过点击不同的标题来切换显示的页面部分，同时根据字体数量调整样式布局，确保良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现内容切换，根据字体的多少适应

<template>
    <div class="switch_list switch_bkgrd" style="padding:96px 0 0 167px;">
      <ul class="tab-tilte__box">
        <li @click="cur1=0" :class="{active:cur1==0}"><p>First section</p></li>
        <li @click="cur1=1" :class="{active:cur1==1}"><p>Second section</p></li>
        <li @click="cur1=2" :class="{active:cur1==2}"><p>Third section</p></li>
        <li @click="cur1=3" :class="{active:cur1==3}"><p>Forth section</p></li>
      </ul>
    </div>
</template>

<script>
export default {
  data(){
    return {
      cur1:0,
    }
  }
}
</script>

<style lang="scss">
.tab-tilte__box{
  display: flex;
  li{
  height:28px;
  margin-right:48px;
  font-size: 14px;
  color: #21252E;
  cursor: pointer;
    p{
        height:28px;
        border-bottom:3px solid transparent;
    }
  }
  .active{
    color: #00B259;
    p{
        border-bottom:3px solid #00B259;
    }
  }
} 
</style>