這是一款使用十分方便的、為移動設(shè)備定制的、可在水平和垂直兩個方向上顯示的jQuery和css3響應(yīng)式tab選項卡插件。在你要顯示很多不同的內(nèi)容時，tab選項卡導(dǎo)航方式是十分有用的。常見的方式是在同一個頁面中顯示不同的選項，并通過標(biāo)簽可以進(jìn)行導(dǎo)航。另一個有用的地方是后臺管理界面，在這里用戶通常需要快速的切換各種管理界面。這個tab選項卡插件的代碼是否簡單，使用一點CSS和jQuery來切換tabs的高度。這個插件的特點在于使用小屏幕的設(shè)備：為了讓用戶在小屏幕上可以看到所有的tab按鈕，我們將tab選項卡制作為水平導(dǎo)航方式，超出屏幕的部分可以使用滾動條滑動顯示。HTML結(jié)構(gòu)html結(jié)構(gòu)包括兩個無序列表：.cd-tabs-navigation 和 .cd-tabs-content。第一個導(dǎo)航按鈕，第二個內(nèi)容。它們被包裝到 div .cd-tabs中。

• Inbox

• Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?

  Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?

CSS樣式我們使用CSS媒體查詢技術(shù)來改變tab選項卡的水平或垂直顯示方式。這個插件是基于移動設(shè)備優(yōu)先的。給元素設(shè)置overflow:auto來隱藏一部分無序列表-超出顯示屏幕的部分，然后使用-webkit-overflow-scrolling: touch 來為移動設(shè)備制作一個平滑的滾動條。.cd-tabs nav { overflow: auto; -webkit-overflow-scrolling: touch; /*...*/}CSS和jQuery代碼相當(dāng)簡單，你可以下載文件自行研究一下。

總結(jié)

以上是生活随笔為你收集整理的html tab选项卡 控件,tab选项卡插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。