tab 切换样式

秒速五厘米 2022-08-31 04:42 219阅读 0赞

![20210722193233170.png][]

<ul>

<li v-for="(item, index) in titleList0" :key="index">

<div class="liName" :class="\{activeLiName: showLiName == index\}" @click="clickLiName(index)">\{ \{ item.name \}\}</div>

</li>

</ul>

titleList0: \[

\{

name: "总平面图",

\},

\{

name: "层平面图",

\},

\{

name: "水源分布图",

\},

\{

name: "方位及行车路线",

\},

\{

name: "战斗部署图",

\},

\],

ul \{

display: flex;

flex-direction: row;

justify-content: flex-start;

align-items: center;

li \{

// width: 79px;

height: 18px;

font-size: 20px;

line-height: 18px;

font-family: Source Han Sans CN, Source Han Sans CN-Medium;

font-weight: 500;

color: \#5d7990;

padding: 0px 10px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

border-right: 2px solid \#015d8d;

.liName \{

padding: 4px 0;

cursor: pointer;

\}

.line \{

margin-left: 10px;

width: 2px;

height: 18px;

background: \#015d8d;

\}

\}

li:last-child \{

border:none;

\}

.activeLiName \{

color: \#94C5FF;

border-bottom: 1px solid \#94C5FF;

\}

\}

[20210722193233170.png]: /images/20220829/24740ce66c1947d887790a7e94ca5eee.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery样式操作（Tab栏切换）

一、操作方法主要有两种方法：一种是操作css方法，另外一种是设置类样式。操作css方法 1. 参数只写属性名，则返回属性值 2. 参数是属性名，属性值，逗号隔

心已赠人/ 2023年07月03日 13:28/ 0 赞/ 7 阅读

相关 CSS组件的样式绑定 + tab标签切换内容

CSS组件的样式绑定 + tab标签切换内容效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

朱雀/ 2023年05月29日 02:36/ 0 赞/ 187 阅读

相关 jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

jQuery修改css样式参数只写属性名，则是返回属性值 $(this).css("color"); 参数是属性名，属性值，中间用逗号分隔，则表示设置一组样

秒速五厘米/ 2023年01月02日 11:28/ 0 赞/ 239 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 193 阅读

相关样式集（9） - 切换Tab菜单

先上效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

傷城~/ 2022年10月09日 00:38/ 0 赞/ 185 阅读

相关 tab 切换样式

![20210722193233170.png][] <ul> <li v-for="(item, index) in titleList0" :

秒速五厘米/ 2022年08月31日 04:42/ 0 赞/ 220 阅读

相关 tab切换

/tab切换/ .tab-common { width: 100%; background-color: 25303c; } .tab-common .tab

迷南。/ 2022年06月07日 14:20/ 0 赞/ 244 阅读

相关 vue tab切换

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年02月21日 05:54/ 0 赞/ 331 阅读

相关 jquery之tab样式切换

> 简单的一个小dom。 <！--heml--> <ul id="navlist"> <li>全部</li>

骑猪看日落/ 2022年01月31日 04:59/ 0 赞/ 270 阅读

相关 tab切换效果

![20210203145157983.gif][] 该dome仅供参考: 免费项目dome包在文章最底部 html <view class="mg_bo

系统管理员/ 2021年07月25日 02:44/ 0 赞/ 513 阅读