前端之tab切换案例

最新推荐文章于 2024-04-30 20:15:41 发布

VIP文章 dr-y

最新推荐文章于 2024-04-30 20:15:41 发布

阅读量703

点赞数 1

分类专栏：前端页面文章标签： vue html css javascript

本文链接：https://blog.csdn.net/m0_49368195/article/details/108596286

版权

Tab栏切换

1. tab栏-案例1

在这里插入图片描述

tab栏分析
li里面的分析

在这里插入图片描述

js实现隐藏与显示

排他思想：
1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式（留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
我的思路：

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        li {
    
            list-style: none;
        }
        
        a {
    
            text-decoration: none;
            color: #666;
        }
        
        .vertical-tab {
    
            width: 980px;
            margin: 100px auto;
        }
        
        .vertical-tab .nav {
    
            width: 200px;
            list-style: none;
        }
        
        .vertical-tab .nav-tabs1 {
    
            float: left;
            border-right: 3px solid #e7e7e7;
        }
        
        .vertical-tab .nav-tabs2 {
    
            float: right;
            border-left: 3px solid #e7e7e7;
        }
        
        .vertical-tab li a {
    
            display: block;
            padding: 10px 20px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 18px;
            font-weight: 700;
        }
        
        .vertical-tab .active {
    
            color: #198df8;
        }
        
        .vertical-tab .tabs {
    
            width: 500px;
            float: left;
        }
        
        .vertical-tab .tab-content {
    
            padding: 10px 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .vertical-tab .tab-content h3 {
    
            color: #333;
            margin: 0 0 10px 0;
        }
        
        .vertical-tab .tab-content p {
    
            font-size: 12px;
        }
        
        .vertical-tab .hidden {
    
            display: none;
        }
    </style>

</head>

<body>
    <div class="vertical-tab">
        <ul class="nav nav-tabs1">
            <li><a href="javascript:;" class="active" index="1">section 1</a></li

最低0.47元/天解锁文章

dr-y

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端之tab切换案例

Tab栏切换1. tab栏-案例1tab栏分析li里面的分析js实现隐藏与显示排他思想：所有元素全部清除样式（干掉其他人）给当前元素设置样式（留下我自己）注意顺序不能颠倒，首先干掉其他人，再设置自己我的思路：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&l
复制链接

扫一扫