JavaScript原生動態切換tab樣式

阿新 • • 發佈：2021-01-28

在這裡插入圖片描述

<style>
    .box {
        display: flex;
        width: 500px;
        justify-content: space-between;
        border: 1px solid darkgray;
        align-items: center;
        height: 60px;
    }

    .box div {
        text-align: center;
    }

    .active { 

        color: red;
        font-weight: bold;
    }
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
    $(function () {
        let titleList = ['音樂', '電影', '娛樂', '動畫'];
        let html = '';
        let index = 0;//預設顯示樣式div 

        let divList = [];

        //切換資料
        function setTabBar(arr) {
            arr.forEach(function (item) {
                html += '<div>' + item + '</div>'
            });
            $('.box').html(html);
            divList = $('.box>div');
            divList[index].className = 
 'active';
        }

        setTabBar(titleList);

        //div點選事件切換樣式,切換卡片
        for (let i = 0; i < divList.length; i++) {
            divList[i].onclick = function () {
                divList[index].className = '';
                divList[i].className = 'active';
                index = i;
            }
        }
    })
</script>


<body>
<div>
    <div class="box">
    </div>

</div>

JavaScript原生動態切換tab樣式

技術標籤：JavaScriptjavascriptjquery <style> .box { display: flex; width: 500px; justify-content: space-between;

Vue切換Tab動態渲染元件的操作

使用<component :is=\"元件名\"></component> 結合Element-UI的導航選單 : UI元件 el-menu-item裡的index寫對應的元件名

vue 動態切換樣式

技術標籤：Vuevue.js 思路：動態繫結class樣式，通過事件賦值，從而改變樣式！

qt tablewidget 實現tab來回切換_原生JS實現TAB選項卡切換效果

技術標籤：qt tablewidget 實現tab來回切換外掛化寫法： HTML： tab1 tab2 tab3 tab4 tab5 頁面1

JavaScript面向物件版tab 欄切換

技術標籤：JavaScript高階javascriptjstab 功能需求點選 tab欄,可以切換效果.點選 + 號, 可以新增 tab 項和內容項.點選 x 號, 可以刪除當前的tab項和內容項.雙擊tab項文字或者內容項文字可以修改裡面的文字內容

【快應用】快應用中如何實現tab頁面切換時更新tab樣式？

問題背景：在日常開發中，有時需要實現tab頁面切換時更新tab樣式，比如使tab文字突出顯示。

javascript Canvas動態粒子連線

好久沒寫部落格了，最近負責了公司年會的大屏簽到、滾動抽獎、節目投票，整個專案做下來有驚也有喜。期間用到了Canvas製作動畫，我這邊就簡單做了個動態粒子連線的例子與大家分享。

spring boot多資料來源動態切換程式碼例項

這篇文章主要介紹了spring boot多資料來源動態切換程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

thinkphp3.2.3框架動態切換多資料庫的方法分析

本文例項講述了thinkphp3.2.3框架動態切換多資料庫的方法。分享給大家供大家參考，具體如下：

Javascript原生ajax請求程式碼例項

這篇文章主要介紹了Javascript原生ajax請求程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

python GUI庫圖形介面開發之PyQt5動態載入QSS樣式檔案

在Qt中經常需要使用樣式，為了降低耦合性（與邏輯程式碼分離），我們通常會定義一個QSS檔案，然後編寫各種控制元件（QLabel，QLIneEdit，QPushButton等）的樣式，最後使用QApplication或QMainWindow來載入樣式，這樣

微信小程式點選按鈕動態切換input的disabled禁用/啟用狀態功能

做微信小程式專案的時候遇到一個功能，個人資訊資料的修改與儲存。以下是說明及簡化後的程式碼：

JavaScript實現動態留言板

本文例項為大家分享了簡單動態留言板的建立，供大家參考，具體內容如下效果圖展示：

vue線上動態切換主題色方案

主要原理是利用webpack外掛webpack-theme-color-replacer提取相關顏色css然後根據配置動態生成替換的css

小程式中使用css var變數(使js可以動態設定css樣式屬性)

使用sass,stylus可以很方便的使用變數來做樣式設計，其實css也同樣可以定義變數，在小程式中由於原生不支援動態css語法，so，可以使用css變數來使用開發工作變簡單。

Vue + Scss 動態切換主題顏色實現換膚的示例程式碼

根據預設的配色方案，在前端實現動態切換系統主題顏色。大概的思路就是給html根標籤設定一個data-theme屬性，然後通過js切換data-theme的屬性值，Scss根據此屬性來判斷使用對應主題變數。這裡可以選擇持久化Vux或介

python將logging模組封裝成單獨模組並實現動態切換Level方式

查找了很多資料，但網上給出的教程都是大同小異的，而我想將程式碼進一步精簡，解耦，想實現如下兩個目標

springboot 之根據傳入引數進行多資料來源動態切換

背景：最近有一個需求是根據app傳來的請求引數，根據行政部門編碼請求不同地區的資料，之前寫的多資料來源都是固定某個方法呼叫指定的dao然後查詢不同的資料庫，但是這次是需要根據前端傳入引數進行動態區分資料庫，

解決elementUI 切換tab後 el_table 固定列下方多了一條線問題

現象：解決方法： 1.修改全域性css 2.只修改區域性css .你的tableClass{ /deep/ .el-table__fixed {

基於Echarts圖表在div動態切換時不顯示的解決方式

簡單粗暴，先上圖，大概長這樣：在使用vue時有遇到像上圖下拉框change事件切換div，change切完後大概會變成這個樣子：

JavaScript原生動態切換tab樣式

相關推薦