您現在的位置是:電腦技術吧?>? 組裝維修 ??>??關于選項卡的切換,切換選項卡在哪里??>??正文詳情

關于選項卡的切換,切換選項卡在哪里

逄陽陽2019-11-27 12:11:45 人圍觀
簡介網頁選項卡切換效果:目標是什么?MDN描述如下::target:target偽類表示唯一元素(如果有的話),其ID與frag匹配tab選項卡切換

:target是什么?

MDN是這樣描述的::targetThe :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.在document中,可以設置錨鏈接,舉個例子:CSS Code復制內容到剪貼板

    a href=#tabTest :target/a a href=#tab2Test 2:target/a div id=tabThis is a tab./div div id=tab2This is another tab./div
上面存在兩個錨鏈接:#tab和t#ab2。

當點擊錨鏈接時,就會跳到對應的div,則::target就是給這些div用的。

添加一下CSSCSS Code復制內容到剪貼板

    :target{ color:red; } #tab:target::after{ content:tab1 }
點擊錨鏈接,對應鏈接的div的文本變成紅色,另外,給#tab后面插入一個文本。

效果猛戳:https://jsfiddle.net/dwqs/cL8rawov/應該大致明白了:target的含義了吧~:target可以做什么最簡單的用處:利用:target實現選項卡切換。

HTML:XML/HTML Code復制內容到剪貼板

    div class=tab-control a href=#tab1tab1/a a href=#tab2tab2/a a href=#tab3tab3/a /div div class=tabs div id=tab1 class=tabThis is a tab1/div div id=tab2 class=tabThis is a tab2/div div id=tab3 class=tabThis is a tab3/div /div
CSS:CSS Code復制內容到剪貼板
    .tab-control a{ display:inline-block; text-decoration:none; color:#FFF; height:20px; width:40px; text-align:center; line-height:20px; background:rgba(70,121,189,0.75); } .tab-control a:hover{ background:rgba(70,121,189,1); } .tabs{ position:relative; border:1px solid red; height:200px; width:135px; overflow:hidden; } .tab{ height:100%; width:100%; } :target{ display:block; }
看看效果:Demo當然,:target的功能不僅局限于此。

隱藏元素、創建lightbox 等。

MDN上給了很多個demo:more demo.你自己也可以腦洞大開一下,哈哈。

瀏覽器支持對于:target偽類,瀏覽器支持情況還是不錯的。

版權聲明:本文由 逄陽陽 整理編輯。

原標題:js實現選項卡切換,html實現選項卡切換

轉載注明出處:http://www.dn9ww09s.icu/assemble/14578.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win7沒有藍牙圖標,win7藍牙圖標

    win7沒有藍牙圖標,win7藍牙圖標 相關圖片win7連接藍牙很多時候我忘了帶U盤或數據線,如果我想傳輸文件該怎么辦?事實上,電腦通過藍牙傳輸文件非常方便,但我想使用藍牙時找不到藍牙圖標?今天,我要教你如何設置win7系...

  • DNF吧,DNF

    DNF吧,DNF 相關圖片dnf鬼泣H5正處于風暴的尖端。很多學生想從這一次開始。具體的演奏方法并不簡單。看看騰訊飛牛學生總結的全過程。從早期的規劃到實施,彩色字體動畫的加載都不能掉下來。有反省、...

  • 摩拜隱形貼紙,摩拜618貼紙

    摩拜隱形貼紙,摩拜618貼紙 相關圖片摩拜成立摩比自行車最近推出了收集貼紙發送紅包的活動。許多小合伙人對此表示懷疑。這兩張貼紙有收藏嗎?這可不像支付寶的奉獻精神那樣是個噱頭。今天,超人小版將為大家介紹...

  • clip path,clip

    clip path,clip 相關圖片path根據她過去的經驗,這個網站的HTML和CSS完全在她的能力范圍內,所以我幫她完成了這個效果。顯示導航被修剪的效果不是一件簡單的事情。我在圖片中看到的第一個反應是Octopath...

  • 0x8024402f,0x80071a90

    0x8024402f,0x80071a90 相關圖片win10 0x8024402c在上一個教程中,超人已經教過您如何解決win10升級失敗提示中的錯誤0xc190101-0x30018。這一次,超人教你如何在win10更新失敗提示中解決錯誤0錯誤0x800f0986...

  • media怎么用,media

    media怎么用,media 相關圖片mediabox怎么使用語法:CSS代碼將內容復制到剪貼板@media:{srules}值::指定設備名{srules}:樣式表定義注意:判斷媒體(對象)類型以實現不同的表示。此功能允media coverage...

  • 怎么才能連上wifi,一鍵連接wifi

    怎么才能連上wifi,一鍵連接wifi 相關圖片wifi不知道密碼怎么連接由于手機流量收費的問題,WiFi是每個人用手機上網的最佳選擇。即使在購物和選擇餐館時,他們也會選擇有WiFi的商店。但如果有庫蓮WiFi軟件,就不需要選擇WiF如...

  • 大于等于號怎么打電腦,小于等于號電腦怎么打

    大于等于號怎么打電腦,小于等于號電腦怎么打 相關圖片手機上大于等于號怎么打出來大于或等于號是數學中常用的符號之一。日常書寫很簡單。然而,在計算機或其他移動設備上,許多人不知道如何輸入大于或等于號。讓我們向超人軟件站...

  • jexl2使用詳解,tinyxml2使用詳解

    jexl2使用詳解,tinyxml2使用詳解 相關圖片protobuf使用詳解RGB顏色模型來解釋RGB顏色模型是一種描述紅色、綠色和藍色原色在一定顏色中的量,就像混合水彩畫或油畫得到一種真正的顏色,我們想想象一下,如果你想與純藍色相匹...

  • 去哪兒app怎么刪除訂單,去哪兒如何刪除訂單記錄

    去哪兒app怎么刪除訂單,去哪兒如何刪除訂單記錄 相關圖片去哪網刪除訂單信息作為一款非常優秀的旅游軟件,我相信很多小伙伴都會通過去哪兒預訂酒店、機票等。那么在哪里刪除訂單呢?接下來,超人軟件編輯想向大家介紹一下在哪里刪除...

熱評文章

  • tomcat9環境變量配置,tomcat8配置環境變量

    tomcat9環境變量配置,tomcat8配置環境變量 相關圖片maven環境變量配置Tomcat是Jakarta項目的核心項目,它是一個開源的、免費的輕量級應用服務器,是開發和調試JSP程序的首選。盡管Tomcat處理靜態html的能力不如Apmysql環境變量配置...

  • 瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因

    瀏覽器卡慢怎么解決,瀏覽器打開慢什么原因 相關圖片ie瀏覽器閃退怎么解決在使用win7系統時,當打開IE時沒有響應時,您會選擇終止進程,然后重新打開IE。但是如果再次發生這種情況,您會怎么做?你不能一直重新開始,是嗎?下面的超...

  • 什么是響應式編程,響應式編程

    什么是響應式編程,響應式編程 相關圖片spring5響應式編程如今,響應式網頁設計無疑非常流行。對于新人來說,響應式設計聽起來有點復雜,但事實上,它比你想象的要簡單得多。為了幫助您開始響應式web設計,我編寫了一個...

  • 視頻怎么剪輯,如何剪輯視頻中的一段

    視頻怎么剪輯,如何剪輯視頻中的一段 相關圖片卡點視頻怎么剪輯有兩種方法可以使用love clip自由剪輯視頻片段。首先,單擊主界面右上角預覽框時間進度條上的向下箭頭(快捷鍵Ctrl e),打開創新的時間線面板,將音頻波形手機怎...

  • 實現了三個效果,實現了效果

    實現了三個效果,實現了效果 相關圖片價值實現的效果show()/hide()show()/hide()的實現主要控制元素的display屬性。HTML:XML/HTML代碼復制內容到剪貼板DIVID= BOX輸將目的實現效果...

  • 切換輸入法,如何切換輸入法

    切換輸入法,如何切換輸入法 相關圖片輸入法切換快捷鍵您是否遇到win10系統的輸入方法無法切換的情況?如果是,我們該怎么辦?我相信很多朋友都遇到過這個問題。別擔心。超人編輯將為你分享Win10的解決方案輸入法怎么...

  • 如何安裝office2013,安裝office2013

    如何安裝office2013,安裝office2013 相關圖片office怎么安裝Win10系統已發布。我相信很多小業主也升級了系統。作為一個非常重要的辦公軟件,office是安裝必備的軟件之一,但是如何安裝win10系統呢?今天超人帶來的woffice2013安裝回...

  • 導航欄導航欄,pyqt5導航欄怎樣實現

    導航欄導航欄,pyqt5導航欄怎樣實現 相關圖片導航欄的下拉菜單以上是一個渲染,代碼如下:htmlxml/HTML code將內容復制到剪貼板navul class=NAV ullia href=/homepage/a/Li500導航第一導航欄導航...

  • win10新功能能,win10有哪些新功能

    win10新功能能,win10有哪些新功能 相關圖片windows10分屏最近,微軟對win10系統進行了第一次重大更新,帶來了許多新功能和功能上的變化。除了明顯的變化外,這次更新還帶來了一些隱藏的功能。現在讓我們去超人那里把你可能找...

  • Git使用詳細教程,skyiar詳細使用教程

    Git使用詳細教程,skyiar詳細使用教程 相關圖片pspice使用教程什么是柔性盒子?靈活的可伸縮性,箱型箱,這可以理解為一種新的箱型膨脹箱模型。這是CSS3規范提出的新一代布局模塊,它基于我們非常熟悉的原始塊、內聯塊和內聯塊...

關注微信

变脸官网查询