html代码
目錄
11111
22222
33333 " >
11111
22222
33333
首頁 web前端 js教程 javascript實作tabs選項卡切換效果(自寫原生js)_javascript技巧

javascript實作tabs選項卡切換效果(自寫原生js)_javascript技巧

May 16, 2016 pm 05:40 PM
切換 選項卡

現在的頁面上有許多各種各樣的頁面效果,常用的有彈出層效果,無縫滾動效果,選項卡切換效果。今天分享一款自己用原生javascript寫的選項卡切換效果,由於本人水平有限,如有問題請指出。
效果圖如下:
javascript實作tabs選項卡切換效果(自寫原生js)_javascript技巧 
html代碼

複製代碼



複製代碼



複製代碼



複製代碼


程式碼如下:






js-tabs


a{color:#a0b3d6;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a.tabs-nav a. {background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left; tabs-nav .on{background:white;border-bottom:1px solid white;_position:relative;}
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px ;}





首頁
技術
生活
作品


首頁首頁首頁首頁首頁首頁首頁首頁


技術技術技術技術技術技術技術技術技術技術


生活生活生活生活生活生活生活生活


作品作品作品作品作品作品作品作品作品







1111111111111111111111111111111111


33333333333333333333333333333333333333333


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1421
52
Laravel 教程
1316
25
PHP教程
1266
29
C# 教程
1239
24
修正:Google Chrome 中的 ERR_ADDRESS_UNREACHABLE 錯誤 修正:Google Chrome 中的 ERR_ADDRESS_UNREACHABLE 錯誤 May 15, 2023 pm 06:22 PM

幾位windows用戶抱怨,當他們嘗試在系統上的googlechrome瀏覽器上造訪一些網站時,他們無法存取網頁。它還在瀏覽器上顯示一條訊息,顯示“無法存取該網站”,錯誤代碼為ERR_ADDRESS_UNREACHABLE。此問題背後可能有許多潛在原因,可能是由於網站伺服器問題、代理伺服器設定、網路連線不穩定等。如果您也遇到類似的問題,請不要驚慌。在深入分析了這篇文章中的問題後,我們得到了一堆解決方案。在繼續之前,請嘗試以下解決方法:嘗試檢查使用者是否嘗試從其他裝置造訪網站並且沒有問題,那麼這

修正:在 Windows 11 上執行 Valorant 時出現 VAN 1067 錯誤 修正:在 Windows 11 上執行 Valorant 時出現 VAN 1067 錯誤 May 22, 2023 pm 02:41 PM

該作業系統看起來比其前身要好得多,並具有AutoHDR和DirectStorage等面向遊戲玩家的功能,但Valorant玩家在啟動遊戲時遇到了一些麻煩。這不是早先遊戲玩家面臨的第一個問題,Valorant無法在Windows11上打開是困擾他們的另一個問題,但我們已經介紹了修復它的方法。現在看來,切換到Windows11的Valorant玩家由於安全啟動和TPM2.0服務而面臨問題,這導致遊戲選單在運行時僅顯示退出選項。很多用戶都收到VAN1067錯誤,但這不應該引起警

DirectX 函數 GetDeviceRemovedReason 失敗並出現錯誤 DirectX 函數 GetDeviceRemovedReason 失敗並出現錯誤 May 17, 2023 pm 03:38 PM

我們玩的幾乎所有高階遊戲都依賴DirectX來有效運作。但是,一些使用者報告遇到DirectX函數GetDeviceRemovedReasonfailedwith,然後是錯誤原因。對於一般使用者而言,上述原因並非不言自明,需要進行一定程度的研究才能確定根本原因以及最有效的解決方法。為了使事情變得更容易,我們將本教程專門用於此問題。在以下部分中,我們將協助您確定潛在原因並引導您完成故障排除步驟,以消除DirectX函數GetDeviceRemovedReasonfailedwitherror。什麼導致

如何在 iPhone 上變更字體顏色 如何在 iPhone 上變更字體顏色 May 13, 2023 pm 01:01 PM

顏色有助於我們在視覺上處理事物的方式,因此在文件、電子郵件、鎖定螢幕和其他元素中使用各種顏色看起來更美觀。與字體樣式一樣,選擇不同的字體顏色可能是避免手機上的文字看起來單調的好方法。如何在Pages應用程式中更改字體顏色您可以在iPhone上更改文件的文字顏色,也可以在iOS上開啟Pages應用程式來完成。在Pages內,點選要開啟的文件。如果文件在螢幕視圖中打開,請點擊右上角的編輯按鈕。所選文件現在將進入編輯模式。若要變更此文件中文字的字體顏色,請點擊所需文字以突出顯示它。突顯

如何在 Word 文件中新增/刪除浮水印 如何在 Word 文件中新增/刪除浮水印 May 24, 2023 pm 12:52 PM

基本上,水印是一個短語或淺灰色陰影的圖像,作為背景添加到任何頁面或文件的一部分。它以一種帶有淺色陰影的方式放置,這樣它就不會幹擾文件中內容的可見性。通常,您必須看到帶有公司徽標、品牌名稱或草稿或機密等短語作為浮水印的文檔。在文件中使用浮水印有助於保護您的內容或您不希望其他人聲明為他們的任何其他項目的版權。因此,水印可用於阻止複製/偽造您的文件內容。您是否正在考慮添加浮水印以保護您的文件或在現有浮水印達到目的後刪除它?在本文中,我們討論瞭如何在Word文件中新增和刪除浮水印。如何在Word中加入浮水印1.點擊

您很快可以透過雙擊關閉 Microsoft Edge 中的選項卡 您很快可以透過雙擊關閉 Microsoft Edge 中的選項卡 May 20, 2023 am 10:16 AM

MicrosoftEdge在Canary頻道中獲得了另一個更新,它帶來了一些新增功能,包括一項新功能,可讓您透過雙擊關閉MicrosoftEdge選項卡。對於那些不知道的人,與穩定版、Beta版和開發版相比,EdgeCanary是一個原始且未完成的瀏覽器。與您之前使用的穩定版瀏覽器相比,Canary的體驗通常有點顛簸。錯誤和功能可能隨時出現,其中一項新增功能是能夠透過雙擊關閉選項卡。微軟一直在對瀏覽器中的選項卡管理進行各種更改,以使其感覺更快、更易於使用和管理。您現在可以使

win11家庭版切換專業版操作教學_win11家庭版切換專業版操作教學 win11家庭版切換專業版操作教學_win11家庭版切換專業版操作教學 Mar 20, 2024 pm 01:58 PM

Win11家庭版怎麼轉換成Win11專業版?在Win11系統中,分為了家庭版、專業版、企業版等,而大部分Win11筆電都是預先安裝Win11家用版系統。而今天小編就帶給大家win11家庭版切換專業版操作步驟!1、先在win11桌面此電腦上右鍵屬性。 2、點選更改產品金鑰或升級windows。 3、然後進入後點選更改產品金鑰。 4.再輸入啟動金鑰:8G7XN-V7YWC-W8RPC-V73KB-YWRDB,選擇下一步。 5.接著就會提示成功,這樣就可以將win11家用版升級win11專業版了。

小米14Ultra如何切換4g和5g? 小米14Ultra如何切換4g和5g? Feb 23, 2024 am 11:49 AM

小米14Ultra是今年小米中非常火熱的機型之一,小米14Ultra不僅升級了處理器以及各種配置,而且還為用戶們帶來了很多新的功能應用,從小米14Ultra銷售就可以看出來手機的火爆程度,不過有一些常用的功能可能你還沒了解。那麼小米14Ultra如何切換4g和5g呢?下面小編就來為大家介紹一下具體的內容吧!小米14Ultra怎麼換4g和5g? 1.打開手機的設定選單。 2、設定選單中尋找並選擇「網路」、「行動網路」的選項。 3.在行動網路設定中,會看到「首選網路類型」選項。 4、點選或選擇該選項,會看到

See all articles