三款標籤切換效果

2021-04-16 01:38:17 字數 614 閱讀 1496

在網頁中加入標籤選項卡可以使網頁顯得更緊湊,結合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

新聞內容

小程式標籤頁切換效果

小程式標籤頁切換效果 效果 wxml 達叔 達叔達叔 welcome come to 達叔 welcome come to 達叔 welcome come to 達叔 wxss tab toptabswiper toptabswiper after tabborer swiper swiper co...

網頁切換效果

網頁切換漸隱效果 拿來測試下,看看有用不,呵呵,沒事玩玩先 在網頁的 中最上面加入以下 就可以有本 的動態漸隱效果.成都軍區聯勤部機關醫院兒科 說明 page enter是指進入頁面的時候,page exit離開頁面的時候,duration 0.5 是設定漸隱時間的成都兒童專科醫院 duration...

tab切換效果

今天上一套tab切換效果的 就自己實現吧!下面貼html 大體分兩部分,div和按鈕div,很容易看懂 123 45這個還是比較簡單的div結構,下面是對應的css button btn p main pictures 對所有div的簡單布局,最後主要實現功能 所以重要的js 如下 window.o...