選項卡功能隨筆

阿新 • • 發佈：2022-03-02

<body>
    <div id="box">
       <button class="color">one</button><button>two</button><button>three</button>
        <div class="one">第一塊</div>
        <div class="one">第二塊</div>
        <div class="one">第三塊</div>
    </div>
    <script>
        var 
 box = document.getElementById("box");
        console.log(box);
        var btn = document.getElementsByTagName("button");
        var div = document.getElementsByClassName("one");
        console.log(div);
        console.log(btn);
        for(var i=0;i<btn.length;i++){
            btn[i].index  
= i;//給btn設定下標值，方便後面跟下面div一一對應
            btn[i].onclick = function (){
                for(var n=0;n<div.length;n++){
                    btn[n].className = "";
                    div[n].style.display = "none";//做一個排他處理，將所有元素樣式清除
                }
                this.className = "color";
                div[ 
this.index].style.display = "block";//給點選的元素新增樣式
            }
            if(i!=0){
                div[i].style.display = "none";//剛開始的時候給除預設元素外的其他元素隱藏樣式
            }
        }
    </script>
</body>

　　實現思想就是點選一個按鈕顯示一個模組同時點選的按鈕高亮顯示，主要的問題就是按鈕跟模組如何一一對應，於是就有了給按鈕組設定下標index，div就可以根據這個下標與btn一一對應

還有一個問題就是涉及到排他思想，自身有樣式然後其他沒有樣式，所以點選按鈕給高亮之前要將所有按鈕高亮清除，這裡就是通過再遍歷一遍元素組清除樣式

選項卡功能隨筆

<body> <div id=\"box\"> <button class=\"color\">one</button><button>two</button><button>three</button>

opera瀏覽器使用雅黑_使用Opera的“高階”選項卡功能來增強您的Web瀏覽體驗

opera瀏覽器使用雅黑 Tabbed browsing is a fairly new concept. Not that long ago, if you wanted to view a website, but didn’t want to leave the website you were currently viewing, you h

善用CSS偽類，不用JS也能做出選項卡功能

先看看Demo: CODEPEN 示例頁面講到選項卡（Tabs）功能時，大多會想到用JavaScript去做，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery實現的（其實網路上有很多用jQuery開發的Tab）；但其實不用jQuer

jquery/jq實現tab切換/選項卡功能

技術標籤：前端JSjavascript css程式碼 <style> *{ margin: 0 auto; padding: 0; list-style: none;

jQuery實現套選項卡功能

本文例項為大家分享了實現套選項卡功能的具體程式碼，供大家參考，具體內容如下

使用vue的繫結類名功能寫選項卡

技術標籤：Vuevue 類似於這樣的一個選項卡，content模組的li首先設定全是隱藏，表示式正確新增對應類名，讓對應li顯示，其他隱藏。

JavaScript實現Tab選項卡切換

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

iOS實現帶遮罩的彈出選項卡

在我們日常開發的過程中難免會碰到一些選項的需求，下面是我針對我們該次需求做的一個小的Demo，閒話不多說了，上圖片，上程式碼。

python GUI庫圖形介面開發之PyQt5選項卡控制元件QTabWidget詳細使用方法與例項

PyQt5選項卡控制元件QTabWidget簡介 QTabWidget控制元件提供了一個選項卡和一個頁面區域，預設顯示第一個選項卡的頁面，通過單擊各選項卡可以檢視對應的介面，如果在一個視窗中顯示的輸入欄位很多，則可以對這些欄位

JS面向物件程式設計實現的Tab選項卡案例詳解

本文例項講述了JS面向物件程式設計實現的Tab選項卡。分享給大家供大家參考，具體如下：

js實現選項卡效果

本文例項為大家分享了js實現選項卡效果的具體程式碼，供大家參考，具體內容如下

Python 實現網課實時監控自動簽到、打卡功能

響應國家停課不停學的號召，學生們都開始了網上授課，但由於課程繁多，訊息繁雜，經常錯過課堂簽到，針對這一難題，部落格主作為Python愛好者，完全使用Python語言寫了本篇部落格，希望能夠幫助小夥伴們完成上課簽到

用JS實現選項卡

本文例項為大家分享了JS實現選項卡的具體程式碼，供大家參考，具體內容如下

Python + selenium + crontab實現每日定時自動打卡功能

前言近幾日迫於被輔導員三番五次的提醒每日一報打卡，就想著去寫個指令碼掛在伺服器上定時執行。經過我不懈的努力，最終選擇了seleniumseleniumselenium，因為簡單(

Android 百度地圖定位實現仿釘釘簽到打卡功能的完整程式碼

導語本章根據百度地圖API，實現仿釘釘打卡功能。用到了基礎地圖、覆蓋物、定點陣圖層、陀螺儀方法、懸浮資訊彈框。

如何使用JavaScript檢測空閒的瀏覽器選項卡

在某些情況下，當用戶與我們的最終產品或應用程式進行互動時，我們發現自己會執行許多密集的，佔用大量CPU的任務。啟動輪詢器，建立WebSocket連線，甚至載入視訊或圖片等媒體，都有可能成為效能障礙，尤其是當這些任

小程式實現多個選項卡切換

選項卡的功能用途有很多地方：例如商品評論的切換，還有文章分類還有各種各樣的切換功能需要用到。這個實現是通過for迴圈，取數值下標的方式來實現切換

小程式選項卡以及swiper套用（跨頁面）

選項卡tab和swpier之間的套用，供大家參考，具體內容如下其實我之前寫過一篇選項卡的切換demo，大家闊以參考一下小程式多個選項卡切換

win10系統ie瀏覽器選項卡不見了如何找回

ie瀏覽器的穩定性大家都是有目共睹的，我們可以通過ie瀏覽器看視訊、新聞，還可以查閱資料，操作大家也都比較熟悉了。近期win10系統使用者說ie瀏覽器選卡出現消失不見的現象，給操作帶來不小的麻煩，那麼如何找回IE瀏

小程式開發中關於選項卡高度自適應和選項卡內按鈕位置固定的實現

首先大家都知道小程式自帶的swiper工具是有預設高度的，所以在實際開發中高度自適應的實現是必修課，比較簡單的實現高度自適應的方法是利用scroll-view工具。