tab切換選項卡（原生/jQ/vue）實現方式

阿新 • • 發佈：2019-02-10

<!DOCTYPE >
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title></title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            ul{margin: 10px 20px;}
            ul li{display: inline-table 
; background: #eee; padding: 10px;}
            .active{background: blue; color: #fff;}
            #content > div{width: 200px; height: 150px; border: solid #eee 1px; display: none;}
            #content > div.show{display: block;}
        </style>
        <!--JQUERY -->
        <script 
 src="jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $('ul li').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $("#content > div").eq($(this).index()).show().siblings().hide();
        })
    });
 
</script> 

        <!--JavaScript -->
        <script type="text/javascript">
window.onload = function(){
    var oLi = document.getElementsByTagName("li");
    var onlyDiv = document.getElementById("content");
    var oDiv = onlyDiv.getElementsByTagName("div");

    for(var i = 0; i < oLi.length; i++){
        oLi[i].index = i; //給點選的按鈕新增索引值
        oLi[i].onclick = function(){
        for(var i = 0; i < oLi.length; i++){  
            oLi[i].className = "";  //去掉其它按鈕高亮樣式
            oDiv[i].style.display = "none"; //隱藏所有顯示區域
        }
            this.className = "active"; 
            oDiv[this.index].style.display = "block";   //點選的索引值傳入顯示區域的陣列
            }
    }
}
</script>
    </head>
    <body>
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div id="content">
            <div class="show">111</div>
            <div >222</div>
            <div >333</div>
        </div>
    </body>
</html>

VUE

<template> 
<li
      v-for="(item,index) in tabList" 
      :class="{'active':isActive === index}"
       @click="changeBg(index)"
   >
      {{item}}
</li>
</template>
export default {
  data () {
    return {
        tabList:['茄子','黃瓜'],
        isActive: 0 //預設第一個tab顯示
    }
  },
  methods:{
    changeBg(index){
        this.isActive = index
    }
  }
}
</script>

tab切換選項卡（原生/jQ/vue）實現方式

<!DOCTYPE > <html> <meta http-equiv="Content-Type" content="text/html; charset=utf

小程序之 tab切換(選項卡)

swipe -i per func col cti XML align 簡單好久沒有寫東西了今天寫一個簡單的東西小程序tab切換（選項卡功能） .wxml <view class="swiper-tab"> <view class="

MUI框架-12-使用原生底部選項卡（凸出圖示案例）

MUI框架-12-使用原生底部選項卡（凸出圖示案例）今天，用 mui 做 app 時，遇到了可能各位都遇到過的頭疼問題：底部中間圖示凸起，如下圖：最後有原始碼【提示】：有人問我在 HBuilder 中看不到底部欄，請不要慌，程式碼沒有問題，在模擬器或者真機執行才會有，

選項卡（Tab）切換事件

選項卡切換事件 <style type="text/css"> *{margin: 0; padding: 0; font-family: "微軟雅黑";font-size: 14px;} #container{ width: 398px; ma

原生js、jq切換選項卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>

【jQuery】Tab選項卡（li之間的切換）

演示地址：暫未開放，請前往線上程式碼測試網測試程式碼如下：固定格式在這裡就省略了，如果有問題大家可以自行調整。 No.1 jQuery版 <html> <

tab選項卡（1）：一級tab選項卡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style>

用mui寫的原生tab以及選項卡頁面的拖動效果

廢話少說上程式碼！ 1、首先我們建立原生的tab選項，目前這個很容易實現，在hbuilder中新建專案選中移動app模板選擇 tab的配置項很簡單官網有教程http://ask.dcloud.net.cn/article/12602 注意配置tags

選項卡（1）

lec set 樣式 gin relative ctype ive css樣式 lac 選項卡控件它提供一系列操作按鈕，單擊不同的按鈕可以在各個頁面之間進行切換。選項卡實現的幾種方法： html+css <!DOCTYPE html> <htm

Android開發漂亮底部Tab 標籤選項卡製作教程

開發環境搭建 http://blog.csdn.net/juyangjia/article/details/9471561 HelloWorld http://blog.csdn.net/juyangjia/article/details/9

JS學習筆記 - 面向物件 - 選項卡（普通選項卡改寫）

選項卡3 <script> window.onload=function () { new TabSwitch('div1'); }; function TabSwitch(id) // TabSwitch 是 id 的物件？？ { // var oDi

Java選項卡（JTabbedPane）的使用

JTabbedPane是一種可以放多個面板的並且可以方便切換的容器 1. 建構函式（1）JTabbedPane( ) 建立空的JTabbedPane物件，但實際它的默認值為JTabbedPane.Top,也就是說卡片名將放在容器頂部。（2

氾濫的tab切換一例（純CSS）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://

切換選項卡+js+css+html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

HC 原始碼分析 6：MediaInfo選項卡（CPPageFileMediaInfo）

=====================================================Media Player Classic - HC 原始碼分析系列文章列表：===============================================

將項目導入WebStrom中的環境配置（Nodejs+npm+vue）

設置 com header -- 項目導入 log 命令 fault 參考參考： https://segmentfault.com/a/1190000008922234#articleHeader0； http://www.cnblogs.com/pengjunhao/p

XPS15 9560 切換顯卡之後，無法登陸的解決方式

tin read 無法登陸 see run icon server address 切換 XPS15 9560 切換顯卡之後，無法登陸的解決方式 Boot as normal and get to login screen press Ctrl + Alt + F1

工作分享：給DELL服務器加SSD卡（固態硬盤）

服務器 SSD 硬件大家好，我是孤雲幕雨，今天給大家分享一下我的工作內容：給DELL服務器加SSD卡（固態硬盤）非常高興在這個時間發表了博客服務器：戴爾型號：PowerEdge R730 一、加卡前準備 1. 接到工單後記錄需要加SSD卡的信息（SSD卡的牌子、數量

偽數組轉數組方法（原生4種）

ora .cn 成功規範 test ids oar 都是我們偽數組也稱類數組。像arguments 或者獲取一組元素返回的集合都是偽數組。偽數組如何轉換成真正數組，其實我們很少去這麽做，但是那幫面試官可能會問，並且不止一種方法讓你去實現方法一、聲明一個空數組，

題解報告：hdu 2546 飯卡（01背包）

set div input 解題思路結束 hdu 2546 代碼 sizeof 以及 Problem Description 電子科大本部食堂的飯卡有一種很詭異的設計，即在購買之前判斷余額。如果購買一個商品之前，卡上的剩余金額大於或等於5元，就一定可以購買成功（即使購買後

tab切換選項卡 （原生/jQ/vue） 實現方式

相關推薦

tab切換選項卡（原生/jQ/vue）實現方式