乙個封裝了的選項卡效果js

2022-03-23 12:42:08 字數 3925 閱讀 9013

**自:

< title>井底的蛙

預設的onclick

onmousover觸發

選單導航

關於巢狀

其他應用

一些說明  

繫結id="a1"下的td標籤為選單,繫結id="b1"下的div標籤為內容,簡單麼?

td標籤的數量和div標籤的數量必須相同

(若不需要顯示內容,只顯示選單話,可以這個在td標籤上加)

如果id="a1"下的td標籤有巢狀**,這樣的話,就不是所有的td都是選單,這時候需要用下nesting

obj.nesting = [false,true,"",""];

當標籤tag有巢狀時,需要用到這個

比如選項卡內容是放在div容器裡,而本身這個內容裡也有div標籤,這時就需要用到

選單巢狀為false,內容巢狀為true,且會自動判斷出內容標籤,多數時候這樣就可以了

判斷方法為,認定getelementsbytagname後第乙個標籤為內容第一項,其他的就用這個第一項的深度來判斷

但有些情況下,這樣還是不行

我用後面2個引數做id來指定選單或者內容的第一項nesting = [false,true,"","q2"];

這樣就肯定不會錯了(不明白的話看下例子就簡單多了)

obj.index = 0;

預設顯示第幾個選項卡,序號從0開始

obj.style = ["c1","c2","c3"]

選單載入的樣式的classname:

選單未選中的classname是c1

選單選中的classname是c2

選單onmouseover的classname是c3

obj.overstyle = false;

選項卡是否有onmouseover, onmouseout變換樣式事件[非啟用選項卡內容],對應的樣式為style[2]

obj.overchange = false;

選項卡內容是否用onmouseover, onmouseout直接啟用

obj.menu = false;

選項卡是選單型別

obj.auto = [false, 1000];

開始生成選項卡,需要onclick觸發事件的話,可以obj.creat(函式名)

所有的都會觸發

這個例子是用onclick觸發的

並設定overstyle = true;

(over,out改變樣式,但不啟用)

var bba = new opcard();

bba.bind = ["a2","li","b2","div"];

bba.style = ["style1","style2","style1"];

bba.overstyle = true;

bba.creat();

bba = null;

33333

4444444

這個例子是比上面增加skip="true"

即4所以選項卡4是沒有內容的

你可以為選項卡的文字直接加上鏈結,我這裡就不加了

222222

33333

4444444

這個例子是用onmouseover觸發的

(over,out直接啟用)

並且3[選項卡3不會被啟用]

overstyle = true;

var cc = new opcard();

cc.bind = ["a4","li","b4","div"];

cc.style = ["style1","style2","style1"];

cc.overstyle = true;

cc.overchange = true;

cc.creat();

cc = null;

33333

444444423

41111111

我每3秒切換乙個選項卡

var ee = new opcard();

ee.bind = ["a6","li","b6","div"];

ee.style = ["style1","style2","style1"];

ee.auto = [true, 2000];

ee.overchange = true;

ee.creat();

ee = null;

33333

我每3秒切換乙個選項卡

4444444

我每3秒切換乙個選項卡

下面這個結合overchange一起23

41111111

我每2秒切換乙個選項卡

var dd = new opcard();

dd.bind = ["a5","li","b5","div"];

dd.style = ["style1","style2","style1"];

dd.auto = [true, 3000];

dd.creat();

dd = null;

33333

我每2秒切換乙個選項卡

4444444

我每2秒切換乙個選項卡

下面這個再來個3,且overstyle=true;23

41111111

我每1秒切換乙個選項卡

var ff = new opcard();

ff.bind = ["a7","li","b7","div"];

ff.style = ["style1","style2","style1"];

ff.auto = [true, 1000];

ff.overchange = true;

ff.overstyle = true;

ff.creat();

ff = null;

33333

我每1秒切換乙個選項卡

4444444

我每1秒切換乙個選項卡

國內新聞

國際新聞

娛樂新聞

體育新聞

藍色理想

blue idea

注:選單延時一秒關閉

這裡只是演示,實際可以設定下position什麼的。-o-

多級選單不知道能不能支援,沒試過

我見過的許多選項卡都不能用來巢狀

但還是有些時候會用到的

所以如您所見,這個演示本身就是乙個巢狀,效果還不錯

比如切換什麼,不過我太懶了,不寫了。。。

這個能幹什麼,我也不知道。。

新年好啊

快過年了

天好冷啊

大家去搶紅包吧

紅包~!紅包~!你在**啊?

選項卡標題(或者選單)必須和選項卡內容的數量相同,否則會出錯

即使選項卡選單skip="true",內容也要放乙個空的標籤佔位

其他好像暫時沒發現什麼

本來打算加入ajax的,但有些還沒想好。

效率的話,應該還行,我這個演示放了幾個選項卡,似乎還不錯

寫這個的目的就是以後弄選項卡只要處理樣式就可以了,很多選項卡或者切換之類都是大同小異

本來是打算弄些特效在裡面,考慮會增加不少**,所以不加了,簡潔點。

哦,還有選項卡是附加樣式,不會取消原本設定的樣式

如左邊的下劃線是原有的樣式

啥都沒有1

啥都沒有2

啥都沒有3

啥都沒有4

< /table>

< /body>

< /html>

js,選項卡效果

css樣式 parent parent span wrap span wrap span span wrap span.focus ul wrap ul wrap ul ul wrap ul first child ul wrap ul li ul wrap ul li ajs樣式 function...

JS 選項卡效果案例

文字素材 房產 275萬購昌平鄰鐵三居 總價20萬買一居 200萬內購五環三居 140萬安家東三環 北京首現零首付樓盤 53萬購東5環50平 京樓盤直降5000 中信府 公園樓王現房 家居 40平出租屋大改造 美少女的混搭小窩 經典清新簡歐愛家 90平老房煥發新生 新中式的酷色溫情 66平撞色活潑家...

js 的小效果 選項卡

js選項卡 按鈕1按鈕2 按鈕3div1 div2 div3 選項卡 1.按鈕和內容的個數是對應 相等 的 2.當前選中的按鈕有選中狀態 其他按鈕沒有狀態 3.和當前選中的按鈕對應的元素顯示,其他的元素隱藏 選項卡步驟 1.先做按鈕 1 先清空所有按鈕的classname for var i 0 i...