2. 程式人生 > >vue實現選項卡切換效果

vue實現選項卡切換效果

阿新 • • 發佈：2018-11-21

效果如下：

說明：

這裡我使用的原理是利用vue中的v-show/顯示隱藏指令，當為true的時候顯示，為false的時候隱藏

1html程式碼：

<head>
    <meta charset="UTF-8">
    <base target="_blank">
    <title>vue實現選項卡切換效果</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/vue.js"></
 
script>
</head>
<body>
<div id="app">
    <!--主體內容-->
    <div class="center">
        <!--Tap選項卡部分-->
        <div class="center-left-tap">
            <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" @click="mt1">最新</a>
            <
 
a href="javascript:void (0)" class="a-hover" @click="mt2">B2C</a>
            <a href="javascript:void (0)" class="a-hover" @click="mt3">C2C</a>
            <a href="javascript:void (0)" class="a-hover" @click="mt4">傳統零售</a>
            <a href="javascript:void (0)" class
 
="a-hover" @click="mt5">其他</a>
        </div>
        <div class="container" id="container01">
            <!--第一個 最新-->
            <div v-for="val in xuan" v-show="a">
                <div class="con" style="">
                    <div class="center-left-body bg">
                        <div class="img-box1">
                            <img :src="val.img1" alt="" class="img-h b-img">
                        </div>
                        <p><a href="detail-1.html" class="center-left-body-a1">{{val.h1}}</a></p>
                        <p><a href="detail-1.html" class="center-left-body-a2">{{val.p1}}</a></p>
                        <p class="mb-p">{{val.math}}</p>
                        <img :src="val.img2" alt="" class="mb-img">
                        <p><a href="" class="tab-mt">{{val.a1}}</a><a href="" class="tab-mt">{{val.a2}}</a></p>
                    </div>
                </div>
            </div>
            <!--第二個 B2C-->
            <div class="con" v-show="b">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542008037535.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1541985913463.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>


            </div>
            <!--第三個 C2C-->
            <div class="con" v-show="c">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542010837701.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>

            </div>
            <!--第四個 傳統零售-->
            <div class="con" v-show="d">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542076349985.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542075324144.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542027463929.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="" class="tab-mt">企業服務</a><a href="" class="tab-mt">投融資</a></p>
                </div>

            </div>
            <!--第五個 其他-->
            <div class="con" v-show="e">
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542091666106.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企業服務</a><a href="detail-1.html" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542091506167.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企業服務</a><a href="detail-1.html" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181113_1542089470929.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企業服務</a><a href="detail-1.html" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企業服務</a><a href="detail-1.html" class="tab-mt">投融資</a></p>
                </div>
                <div class="center-left-body bg">
                    <div class="img-box1">
                        <img src="img-index/20181112_1542008037535.jpg" alt="" class="img-h b-img">
                    </div>
                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升級 20萬小店接入零售通參加雙11</a></p>
                    <p><a href="detail-1.html"
                          class="center-left-body-a2">據瞭解，天貓雙十一期間，除20萬家街邊小店外，還有3000家天貓小店也將參與到線下活動中。</a></p>
                    <p class="mb-p">2018-11-10 16:32</p>
                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">
                    <p><a href="detail-1.html" class="tab-mt">企業服務</a><a href="detail-1.html" class="tab-mt">投融資</a></p>
                </div>

            </div>
        </div>
    </div>
</div><!--vue 結束-->
</body>

2css程式碼：

<style>
    .center{width: 1160px;margin: 0 auto;}
    a{text-decoration: none;color: #595959;}
    a:hover{color: #1a79ff;}
    /*tap選項卡*/
    .center-left-tap{height: 58px;}
    .center-left-tap a{font-size: 16px;color: #999;margin-right: 37px;padding-bottom: 19px;}
    .a-hover:hover{color: #595959;}

    /*圖文重複內容*/
    .center-left-body{width: 820px;height: 127px;border-top:1px solid #ddd;margin-top: -15px;padding: 21px 0;margin-bottom: 20px;}
    .center-left-body img:nth-child(1){width: 190px;height: 127px;float: left;}
    .center-left-body-a1{float: left;margin-left: 20px;font-size: 18px;line-height: 26px;color: #333;margin-top: -175px;}
    .center-left-body-a2{float: left;margin-left: 210px;font-size: 16px;color: #595959;margin-top: -95px;word-wrap:break-word;}
    .mb-p{float: left;margin-top: -20px;margin-left: 210px;color:#999;}
    .mb-img{float: left;margin-top: -20px;margin-left: 15px;}
    .tab-mt{margin-right: -30px;margin-left: 50px;margin-top: -20px;float: left;}
    .bor-no{border: none;}
    .bg:hover{background-color:#efefef;}
</style>

3js：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            xuan: [],
            a: true,
            b: false,
            c: false,
            d: false,
            e: false,
        },
        mounted: function () {
            this.getData()
        },
        methods: {
            getData() {
                $.ajax({
                    type: 'get',
                    url: 'frame-1.json',
                    detaType: 'JSON',
                    success: function (data) {
                        vm.xuan = data.xuan
                    }
                })
            },

            //    選項卡
            mt1: function () {
                this.a = true
                this.b = false
                this.c = false
                this.d = false
                this.e = false
            },
            mt2: function () {
                this.a = false
                this.b = true
                this.c = false
                this.d = false
                this.e = false
            },
            mt3: function () {
                this.a = false
                this.b = false
                this.c = true
                this.d = false
                this.e = false
            },
            mt4: function () {
                this.a = false
                this.b = false
                this.c = false
                this.d = true
                this.e = false
            },
            mt5: function () {
                this.a = false
                this.b = false
                this.c = false
                this.d = false
                this.e = true
            }
        }
    });
</script>

應屆菜鳥，大佬勿噴...

 

相關推薦

vue實現選項卡切換效果

效果如下： 說明： 這裡我使用的原理是利用vue中的v-show/顯示隱藏指令，當為true的時候顯示，為false的時候隱藏 1html程式碼： <head> <meta charset="UTF-8"> <base target="_blan

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個

純JS實現tab選項卡切換效果

今天學到的用js寫選項卡，有高亮效果，廢話不多說，直接上程式碼吧！！！ 注意事項：css程式碼中有一個隱藏其他div的屬性， display: none;這個一定要注意，要不然你寫的都會顯示出來 html程式碼： <!DOCTYPE html> <html la

Fragment實現底部選項卡切換效果

現在很多APP的樣式都是底部選項卡做為首頁的，實現這樣的效果，我們一般有這樣幾種方式，第一，最屌絲的做法，我直接自定義選項卡檢視，通過監聽選項卡檢視，邏輯控制內容頁的切換，這樣做的想法一般是反正這幾個介面基本都是常駐記憶體的，不用去關心它的快取和回收。第二種，用TabHos

Vue入門（一）-Vue實現選項卡效果

鑑於程式碼有些年代，且當時實現方式很不好，遭到了眾多噴子的人身攻擊，此文章終結，不必浪費大家時間了。---------------------------------------------------

【js基礎】Tab選項卡切換效果實現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

Android仿微信底部實現Tab選項卡切換效果

在網上看了比較多的關於Tab的教程，發現都很雜亂。比較多的用法是用TitlePagerTabStrip和ViewPaper。不過TitlePagerTabStrip有個很大的缺陷，Tab裡面的內容剛進去是沒有的，要滑一次才能加載出來。而且滑動的時候，Tab裡面的內容位置

javascript實現選項卡切換的4種方法

ivar ack doc width -s utf tel 選項 定義 方法一：for循環+if判斷當前點擊與自定義數組是否匹配 <html lang="en"> <head> <meta charset="UTF-8"> &l

選項卡切換效果，點選切換圖片

今天分享一篇前端開發實戰當中經常使用到的選項卡切換效果的文章，希望對您有所幫助，歡迎留言探討。 1、html結構佈局： <div id="box"> <div class="img"> <ul>

html+css+js實現選項卡切換

html+css+js選項卡 原理：先把所有的隱藏，再把當前的顯示出來 效果如下： 一、Html頁面佈局 Html頁面佈局由三個按鈕（input）和三個div組成，三個按鈕中總有一個

用TabLayout實現選項卡滑動效果

實際開發中，ViewPager經常結合Fragment來使用，然後再使用三方開源的PagerSlidingTabStrip去實現類似選項卡滑動效果。我之前那個APP的首頁就是這樣搭建的。 基於Material Design設計的分享文字圖片的APP 現在，我

tab選項卡切換效果（一）——滑過切換和點選切換

JS程式碼如下： <script> function tabMove(){ //獲取滑鼠滑過或點選的標籤和要切換的內容分類元素 var divId01=document

小程式 選項卡操作同時支援左滑右滑實現選項卡切換功能

在這裡用了一下swiper原理：但是出現了一個問題，父級高度為0，子元素全部不顯示，檢視原因，是因為swiper預設為position：absolute，定位導致的，所以需要在style上計算出他當前的高度並且渲染在頁面上，另一個問題是，當前的高度預設為px，而小程式支援的是

vue.js 選項卡切換 對img設定不同的圖片

<img id="img_shared" :src="shared" style="margin-left: 25px;" > 給img標籤設定src 引入兩張圖片  選項卡切換的時候 設定不同的圖片 import shared_nor from '..

jquery實現選項卡切換

選項卡在網頁中很常見，可以說是必備的一個元素了，網上其實也有很多案例講解選項卡的做法，各種炫酷。 寫這篇文章，就是記錄下自己的一個練手Demo了。 兩張簡陋的圖。 主要邏輯就在於找到選

js實現選項卡切換

window.onload=function(){ //獲取每個li var aLi = document.querySelectorAll('ul li'); //獲取每個div var aDiv = document.querySe

初學Vue筆記——選項卡切換功能

　　在沒有學習Vue之前，想要做一個Tabs切換功能，首先想到的當然是通過DOM操作改變元素的class。然而Vue操作的是資料，雖然在方法中可以隨心所欲得寫原生js程式碼來操作DOM，但這會非常彆扭。初學者使用Vue的時候一定要切換一下思維。  <style>

Tab選項卡切換效果

tab選項卡是網頁中最常見的切換效果，常見的tab切換型別有：滑鼠滑過切換、點選切換、延遲切換、以及自動切換。html結構： <div class="notice"> <

android RadioButton實現選項卡的效果

RadioButton通常和RadioGroup配合使用，即同一個group中的按鈕只能一次選中一個，為何使radiobutton具有選項卡的效果需要將其屬性android:button="@null"，為了顯示效果還可以對其背景載入特定選項卡效果的資源，指定其選中和未選中

前端 html+css+javascript 選項卡切換效果

效果圖： html程式碼： <div id="divPage" style="width:800px;height:750px;padding:10px;background:#fafafa;"> <p style="margin-b