前端之tab切換案例

阿新 • • 發佈：2022-01-23

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>
            <li><a href="javascript:;" index='2'>section 2</a></li>
            <li><a href="javascript:;" index="3">section 3</a></li>
        </ul>
        <div class="tab-content tabs">
            <div class="tab-content1">
                <h3>section 1</h3>
                <p>content 1</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 2</h3>
                <p>content 2</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 3</h3>
                <p>content 3</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 4</h3>
                <p>content 4</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 5</h3>
                <p>content 5</p>
            </div>
            <div class="tab-content1 hidden">
                <h3>section 6</h3>
                <p>content 6</p>
            </div>
        </div>
        <ul class="nav nav-tabs2">
            <li><a href="javascript:;" index="4">section 4</a></li>
            <li><a href="javascript:;" index="5">section 5</a></li>
            <li><a href="javascript:;" index="6">section 6</a></li>
        </ul>
    </div>
    <script>
        var as = document.querySelectorAll("a")
        var item = document.querySelectorAll(".tab-content1")
        console.log(as)
            // console.log(lis)
        for (var i = 0; i < as.length; i++) {
            as[i].addEventListener('click', function() {
                // 幹掉其他人
                for (var j = 0; j < as.length; j++) {
                    as[j].className = ''
                }
                // 留下自己
                this.className = "active"

                // 顯示內容
                var index = this.getAttribute('index')
                console.log(index)
                    // 幹掉其他人
                for (var i = 0; i < item.length; i++) {
                    item[i].style.display = "none"
                }
                // 留下自己
                item[index - 1].style.display = "block"
            })
        }
    </script>
</body>

</html>

vue實現

vue實現起來相對簡單，只需要靈活運用v-if和v-for

具體程式碼：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .vertical-tab {
            width: 920px;
            margin: 100px auto;
        }
        
        .vertical-tab .nav {
            list-style: none;
            width: 200px;
        }
        
        .vertical-tab .nav-tabs1 {
            border-right: 3px solid #e7e7e7;
        }
        
        .vertical-tab .nav-tabs2 {
            border-left: 3px solid #e7e7e7;
        }
        
        .vertical-tab .nav a {
            display: block;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 10px 20px;
            margin: 0 0 1px 0;
            text-decoration: none;
        }
        
        .vertical-tab .tab-content {
            color: #555;
            background-color: #fff;
            font-size: 15px;
            letter-spacing: 1px;
            line-height: 23px;
            padding: 10px 15px 10px 25px;
            display: table-cell;
            position: relative;
        }
        
        .vertical-tab .nav-tabs1 {
            float: left;
        }
        
        .vertical-tab .tabs {
            width: 500px;
            box-sizing: border-box;
            float: left;
        }
        
        .vertical-tab .tab-content h3 {
            font-weight: 600;
            text-transform: uppercase;
            margin: 0 0 5px 0;
        }
        
        .vertical-tab .nav-tabs2 {
            float: right;
        }
        
        .tab-content {
            position: relative;
        }
        
        .tab-content .tab-pane {
            position: absolute;
            top: 10px;
            left: 20px;
        }
        
        .nav li.active a {
            color: #198df8;
            background: #fff;
            border: none;
        }
        
        .fade {
            opacity: 0;
            transition: all .3s linear;
        }
        
        .fade.active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="vertical-tab" id="app">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs1">
            <li v-on:click='change(index,0)' :class='currentIndex==index?"active":""' v-if="index < list.length/2" v-for="(item, index) in list"><a href="#"> {{item.title}} </a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content tabs">
            <div class="tab-pane  fade" :class='currentIndex==index?"active":""' :key='item.id' v-for='(item, index) in list'>
                <h3>{{item.title}}</h3>
                <p>{{item.content}}</p>
            </div>

        </div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs2">
            <li v-on:click='change(index,1)' :class='currentIndex==index?"active":""' v-if="index >= list.length/2" v-for="(item, index) in list"><a href="#"> {{item.title}} </a></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                currentIndex: 0, // 選項卡當前的索引
                list: [{
                    id: 1,
                    title: 'Section 1',
                    content: 'content1'
                }, {
                    id: 2,
                    title: 'Section 2',
                    content: 'content2'
                }, {
                    id: 3,
                    title: 'Section 3',
                    content: 'content3'
                }, {
                    id: 4,
                    title: 'Section 4',
                    content: 'content4'
                }, {
                    id: 5,
                    title: 'Section 5',
                    content: 'content5'
                }, {
                    id: 6,
                    title: 'Section 6',
                    content: 'content6'
                }]
            },
            methods: {
                change(index, flag) {
                    if (flag) {
                        console.log(index)
                        this.currentIndex = index;
                    } else {
                        this.currentIndex = index;
                    }

                }
            }

        })
    </script>
</body>

前端之tab切換案例

Tab欄切換 1. tab欄-案例1 tab欄分析li裡面的分析 js實現隱藏與顯示排他思想：

jQuery之Tab切換

Tab切換示例： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

vue元件開發之tab切換元件使用詳解

本文例項為大家分享了vue元件開發之tab切換元件的具體使用程式碼，供大家參考，具體內容如下

jQuery自定義外掛之tab標籤切換

更多jQuery常用外掛使用請訪問：jQuery常用外掛彙總 tab標籤切換是網頁中最常見不過的外掛了，所以寫一個自用的tab標籤切換外掛，偷懶一下。

預防新型冠狀病毒科普宣傳網站之tab欄切換（2020年07月26日）

當滑鼠點選上面相應的選項卡（tab），下面頁面的內容也隨之而改變。 tab欄切換有兩個主要點：①上面模組的選項卡，點選某一個，改變當前樣式，底色變為紅色，字型顏色變為白色。而其他的選項卡樣式不發生改變（排他思

Flutter之底部tab切換

技術標籤：flutterandroidflutter 效果見上圖：（主要是底部的切換實現） import \'package:flutter/material.dart\';

jQ與JS實現tab欄切換案例

技術標籤：javascriptcsshtml5jquery 1、需求：點選哪個導航，那麼導航對應的模組就顯示出來。如圖所示： 2、jquery做法

JavaScript實現簡易tab欄切換案例

本文例項為大家分享了javascript實現簡易tab欄切換效果的具體程式碼，供大家參考，具體內容如下

Tab欄切換案例

想要實現滑鼠點選Tab欄,然後它就會顯示想要的效果。實現程式碼: <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Tab欄切換效果</title><script s

vue vantUI tab切換時 list元件不觸發load事件的問題及解決方法

最近由於公司專案需要，用vue寫了幾個簡單的頁面。用到了vantUI List 列表瀑布流滾動載入，用於控制長列表的展示當列表即將滾動到底部時，會觸發事件並載入更多列表項。

python GUI庫圖形介面開發之PyQt5切換按鈕控制元件QPushButton詳細使用方法與例項

PyQt5切換按鈕控制元件QPushButton簡介 QAbstractButton類為抽象類，不能例項化，必須由其他的按鈕類繼承QAbstractButton類，來實現不同的功能和表現形式，常見的按鈕QPushButton，QToolButton，QRadioButton和QChec

Jquery滑動門/tab切換實現方法完整示例

本文例項講述了Jquery滑動門/tab切換實現方法。分享給大家供大家參考，具體如下：

微信小程式swiper實現tab切換顯示空白頁

<view class=\'tabNav\'> <view class=\"tabItem tab12 {{currentIndex == 0 ? \'on\' : \'\'}}\" data-current=\"0\" bindtap=\'titleClick\' data-idx=\'0\'

3-python資料分析-DataFrame級聯與合併操作鞏固之人口分析案例

需求匯入檔案，檢視原始資料將人口資料和各州簡稱資料進行合併將合併的資料中重複的abbreviation列進行刪除

純CSS實現Tab切換

說到Tab切換，你可能首先想到的就是使用jQuery，短短几行程式碼就可以輕鬆搞定一個Tab切換。而今天所要分享的，是使用0行js程式碼來實現Tab切換！

jquery實現有過渡效果的tab切換

本文例項為大家分享了jquery實現tab切換的具體程式碼，供大家參考，具體內容如下

vue 實現tab切換保持資料狀態

頁面做tab切換，由於元件每一次切換都會重新例項化元件，我們想要頁面不論怎麼切換都仍然保持tab裡面的內容不會重新整理，減少頁面重新渲染以及減少請求

vue tab滾動到一定高度,固定在頂部,點選tab切換不同的內容操作

template裡面:  <ul class=\"tab-list\" :class=\"{fixTitle:whether}\">

vue 使用keep-alive快取tab切換元件，保持每個元件滾動條位置

vue專案中用到了tab切換，由於切換模組過多，都寫在同一組件中程式碼會越來越難維護，解決辦法就是把每個tab頁籤內容拆分成單獨的元件。

xpath之豆瓣圖書案例

# 爬取豆瓣圖書TOP250,爬取的資料儲存到CSV檔案中from lxml import etreeimport requestsimport csv# wt是python中以文字寫的方式開啟,只能寫檔案,如果檔案不存在則建立該檔案fp = open(\"D://pytext/douban_top250

前端之tab切換案例

Tab欄切換

1. tab欄-案例1

相關推薦