三種簡潔的Tab導航(網頁選項卡)簡析

2021-08-30 03:15:54 字數 851 閱讀 3585

在網頁中應用選項卡可以使網頁顯得更緊湊,結合ajax技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹幾種簡潔的選項卡效果的實現(不涉及滑動門和ajax),附有例項,無,相容性較好,方便大家直接使用。

第一種形式: 通過更換顯示樣式實現,這種很常見,就不多說了。

第二種形式: 這種結構比較複雜一些,外面加乙個相對層(.menu1box),設定溢位隱藏,將選項卡(#menu1)設為絕對定位,設定層指標為1(z-index:1;),以便可以遮住下主區塊(.main1box)1px的高度。設定主區塊的邊框為1px的黑邊,上空白(margin-top)為-1px,使上邊框伸到選項卡下。當改變選項卡某項(li)的背景為白色時便可遮住一部分主區塊的上邊框。這樣效果就實現了。

一、二種形式的js**:

function settab(m,n){

var tli=document.getelementbyid("menu"+m).getelementsbytagname("li"); /*獲取選項卡的li物件*/

var mli=document.getelementbyid("main"+m).getelementsbytagname("ul"); /*獲取主顯示區域物件*/

for(i=0;i第三種形式: 這也是一種不常用的方式,加乙個相對層(.menu2box),利用乙個背景層(#tip2)定位,通過改變層的左距離(left)實現效果。

新聞內容

新聞內容

三種簡潔的Tab導航簡析

在網頁中應用選項卡可以使網頁顯得更緊湊,結合ajax技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹幾種簡潔的選項卡效果的實現 不涉及滑動門和ajax 附有例項,無,相容性較好,方便大家直接使用。第一種形式 通過更換顯示樣式實現,這種很常見,就不多說了。第二種形式 這種結構比較複雜一些,外面...

網頁爬取的三種方式

爬取的重點在於分析網頁結構,以爬取 網為例 爬取網頁有三種方式 1.urllib.request 2.封裝request請求 3.urlretrieve直接寫入硬碟 下面以第三種方法爬取 如下 爬取網頁有三種方式 urllib.request,封裝request請求,urlretrieve直接寫入硬...

網頁中的三種位址詳解

網頁中的a標籤具有位址跳轉的功能,href屬性指向跳轉的位址。網路位址分為兩種,一種是絕對位址,一種是相對位址。但是相對位址又可以細分為兩種,一種是基於當前目錄的相對位址,一種是基於伺服器根目錄的相對位址。以下做乙個詳細介紹 絕對位址是帶有http頭部的網路位址 注意,這裡是一定需要帶有網路協議頭部...