tab栏切换默认第一项

已于 2022-03-05 11:54:24 修改
阅读量1.2k 收藏 1
点赞数 1
分类专栏： IT 前端 文章标签： elementui vue.js javascript html html5
于 2022-01-19 16:03:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51396911/article/details/122583157
版权
前端 同时被 2 个专栏收录
47 篇文章 0 订阅
订阅专栏
IT
45 篇文章 0 订阅
订阅专栏

列子：

  <el-tabs v-model="activeTab" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>

1.先在data里定义：activeTab: 'first',

2.参数为一项的name的名称一致就可以了哦

山顶的云彩
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element tabs 的tab-click点击事件怎样取到更多参数
weixin_41950674的博客
12-17 1万+
element tabs 取更多参数
Elementui el-tabs中的tab-click点击事件传递多个值或者传递数组里面的每一项值
L1515115的博客
09-07 9620
今天在使用 饿了么ui 中的el-tabs组件 使用到了tab-click 点击事件，官网对他的介绍回调参数是。然而在实例中并没有找到我想要的参数，我就寻思怎么能将 循环中的每一项。我发现我根本拿不到，所以就自己摸索出一个办法，供大家参考。
vue项目中elementUI中tabs标签页点击切换 发起网络请求 tab-click
热门推荐
qq_41968486的博客
10-10 2万+
elementUI中tabs标签页点击切换 发起网络请求 tab-click 官方中的tabs标签页 示例代码： <template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="seco
element使用el-tabs导致浏览器卡死
qq_34815188的博客
09-11 2938
官网代码 <template> <el-tabs v-model="activeName2" type="card" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="...
vue-封装tabs组件
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
11-01 3323
之前有跟着黑马的b站教程封装了一个微信小程序的tabs组件 微信小程序-tabs切换效果组件封装_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120436232现在用vue写网页，需要个性化封装一个tabs组件（虽然elementUI有tabs组件，但是不太满足当前业务需求，所以自己重新封装一个） 组件：cjTabs.vue <template> <div> <!-- 顶部横
tab栏切换原理
08-31
tab栏切换原理 tab栏切换原理是指在网页中实现多个选项卡之间的切换，展示不同的内容。这种技术广泛应用于网页开发中，例如导航栏、菜单栏、选项卡等。 在实现tab栏切换时，需要两个主要部分：按钮部分和内容部分...
JavaScript实现tab栏切换效果
10-15
`*.tab_con` 是内容区域，其内的 `*.item` 代表每个内容块，默认情况下都处于隐藏状态，只显示第一个内容块。 HTML 结构中，`<div class="tab_top">` 包含了所有的 Tab 标题 `<li>`，并且初始时第一个标题带有 `...
最简单的tab切换实例代码
09-02
` 这行代码显示了第一个`.con`元素，即默认显示第一个内容区块。 2. `.click(function(){...})` 为`.btn span`元素绑定点击事件。 3. `var num = $(".btn span").index(this);` 获取当前被点击`<span>`在兄弟元素中...
左侧导航与tab页切换HTML示例
04-14
在HTML中，我们可以通过`<div>`标签创建tab页容器，每个tab页可以用`<div>`或`<section>`表示，初始时隐藏除第一个外的所有tab页。然后，配合CSS实现视觉样式，如hover效果和选中状态。对于切换逻辑，可以使用...
原生js+css实现tab切换功能
10-14
// 初始选中第一个菜单项和内容 menuItems[0].classList.add('tab-menu-span-hover'); contentItems[0].style.display = 'block'; // 监听菜单项的鼠标悬停事件 for (var i = 0; i ; i++) { menuItems[i]....
一 , Element-UI tabs标签实现点击左右箭头 实现左右tab栏按个选中切换(正常是只会切换到后面空白tab栏 不会选中) .........二 , tabs标签切换不同的模板样式
m0_65607651的博客
05-10 7393
Element-UI tabs标签实现点击左右箭头 实现左右tab栏按个选中切换(正常是只会切换到后面空白tab栏 不会选中) tabs标签切换不同的模板样式
vue + element-ui 制作tab切换（适用于单页切换不同标记显示不同内容）
王维璋
01-10 1万+
vue + element-ui 制作tab切换（适用于单页切换不同标记显示不同内容） 本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容。 1、安装element-ui npm install element-ui --save 2、在main.js中引入element 和 css文件 // The...
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题
08-30 1694
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，导致关闭 dialog 时浏览器卡死问题 解决办法： 给 tab 添加 v-if ，绑定 dialog 的 visible.sync <el-dialog :visible.sync="linkSelecterShow"> <el-tabs v-model="activeName" :visible.sync="linkSelecterShow"> <el-tab-pane label="用
09 分类参数
qq_38210427的博客
03-15 267
vue
标签页使用及bug解决
爱哭的毛毛虫的博客
11-16 1728
标签页使用1、点击菜单项生成新的标签页2、点击标签页项实现页面跳转3、bug 标签页放在main中 标签页el-tabs主要属性： （1）editableTabsValue：高亮表示被选中的标签页（通过name标识） （2）editableTabs:标签页数组（存储所有的标签页信息），属性：name、title <!-- 标签页--> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remo
按钮如何控制tab页面跳转
~牧马~
12-17 3045
按钮控制tab跳转：想通过按钮来控制tab切换，并触发事件，进而获得相应的数据 图一： 图二： 操作效果介绍：图片为el-tab-pane页面，由图一可看到当前所在**工区tab页面，点击添加工点**，页面从工区自动跳转之工点tab页面 实现：相信大家都知道，el-tabs中有一个属性：activaNameel-element官方文档给的是activaName=‘first’，实际其还可以为string的1、2、3、、、、例:activaName= '1'，该属性还需在data中定义下和设置默认值，然后在按
书生浏览器不能打开这个文件或者url_前端都该懂的浏览器工作原理，你懂了吗？...
weixin_39928099的博客
11-26 668
前言在我们面试过程中，面试官经常会问到这么一个问题，那就是从在浏览器地址栏中输入URL到页面显示，浏览器到底发生了什么？这个问题看起来是老生常谈，但是这个问题回答的好坏，确实可以很好的反映出面试者知识的广度和深度。本文从浏览器角度来告诉你，URL后输入后按回车，浏览器内部究竟发生了什么，读完本文后，你将了解到：浏览器内有哪些进程，这些进程都有些什么作用浏览器地址输入URL后，内部的进程、...
【Vue】标签页el-tabs常用写法
慕白Lee的博客
03-19 1万+
【代码】Vue页签的常用写法。
el-tabs选项卡点击事件（Element UI）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
12-11 1万+
<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> </el-tabs> </te
js tab栏切换
最新发布
05-26
可以使用jQuery来实现一个简单的tab栏切换。下面是一个示例代码： HTML： ```html <div class="tab-wrapper"> <ul class="tab-nav"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane">Tab 1 Content</div> <div id="tab2" class="tab-pane">Tab 2 Content</div> <div id="tab3" class="tab-pane">Tab 3 Content</div> </div> </div> ``` CSS： ```css .tab-nav li { display: inline-block; margin-right: 10px; } .tab-nav li a { display: block; padding: 5px; background-color: #eee; border: 1px solid #ccc; text-decoration: none; color: #333; } .tab-nav li.active a { background-color: #fff; border-bottom-color: transparent; } .tab-content .tab-pane { display: none; } .tab-content .active { display: block; } ``` JavaScript： ```javascript $(document).ready(function() { $('.tab-nav li:first-child').addClass('active'); $('.tab-content .tab-pane:first-child').addClass('active'); $('.tab-nav li a').click(function() { var tab_id = $(this).attr('href'); $('.tab-nav li').removeClass('active'); $('.tab-content .tab-pane').removeClass('active'); $(this).parent().addClass('active'); $(tab_id).addClass('active'); return false; }); }); ``` 首先，给每个tab页一个唯一的id，然后使用CSS来设置样式。JavaScript代码中，我们给第一个tab页和tab导航栏的第一个选项添加active类。然后，当点击tab导航栏的某一项时，我们首先移除所有的active类，然后给被点击的导航栏项和对应的tab页添加active类。最后，返回false以阻止默认链接行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山顶的云彩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值