乙個頁面實現多個選項卡切換

2022-09-02 08:24:14 字數 3045 閱讀 3535

>簡潔tab

title

>

<

style

type

="text/css"

>

style

>

<

script

>

script

>

head

>

<

body

>

<

div

class

="menubox"

>

<

ul>

<

li id

="one1"

onclick

="settab('one',1,5)"

>手機充值

li>

<

li id

="one2"

onclick

="settab('one',2,5)"

>網上銀行充值

li>

<

li id

="one3"

onclick

="settab('one',3,5)"

>支付寶充值

li>

<

li id

="one4"

onclick

="settab('one',4,5)"

>手機充值卡充值

li>

<

li id

="one5"

onclick

="settab('one',5,5)"

>金幣賬戶充值

li>

ul>

div>

<

div

class

="contentbox"

>

<

div

id="con_one_1"

>新聞列表1

div>

<

div

id="con_one_2"

style

="display:none"

>新聞列表2

div>

<

div

id="con_one_3"

style

="display:none"

>新聞列表3

div>

<

div

id="con_one_4"

style

="display:none"

>新聞列表4

div>

<

div

id="con_one_5"

style

="display:none"

>新聞sssssssssssssssssssss列表5

div>

div>

<

br />

<

div

class

="menubox"

>

<

ul>

<

li id

="ccc1"

onclick

="settab('ccc',1,5)"

>手機充值

li>

<

li id

="ccc2"

onclick

="settab('ccc',2,5)"

>網上銀行充值

li>

<

li id

="ccc3"

onclick

="settab('ccc',3,5)"

>支付寶充值

li>

<

li id

="ccc4"

onclick

="settab('ccc',4,5)"

>手機充值卡充值

li>

<

li id

="ccc5"

onclick

="settab('ccc',5,5)"

>金幣賬戶充值

li>

ul>

div>

<

div

class

="contentbox"

>

<

div

id="con_ccc_1"

>新聞列表1

div>

<

div

id="con_ccc_2"

style

="display:none"

>新聞列表2

div>

<

div

id="con_ccc_3"

style

="display:none"

>新聞列表3

div>

<

div

id="con_ccc_4"

style

="display:none"

>新聞列表4

div>

<

div

id="con_ccc_5"

style

="display:none"

>新聞sssssssssssssssssssss列表5

div>

div>

body

>

html

>

js實現選項卡切換

1.效果圖 2.實現 分兩部分 一是選項卡,二是選項卡內容 3.1 2328 2930 3536 275萬購昌平鄰鐵三居 總價20萬買一居 37 200萬內購五環三居 140萬安家東三環 38 北京首現零首付樓盤 53萬購東5環50平 39 京樓盤直降5000 中信府 公園樓王現房 4041 42 ...

用html css js實現選項卡切換效果

使用之前學過的綜合知識,實現乙個新聞門戶 上的常見選項卡效果 文字素材 房產 275萬購昌平鄰鐵三居 總價20萬買一居 200萬內購五環三居 140萬安家東三環 北京首現零首付樓盤 53萬購東5環50平 京樓盤直降5000 中信府 公園樓王現房 家居 40平出租屋大改造 美少女的混搭小窩 經典清新簡...

js實現滑鼠滑過選項卡切換效果

愛你不是兩三天 a li li a href 你是我的蝴蝶 a li li a href 在人來人往的街上想起你 a li li a href 你是魔鬼中的天使 a li ul div div class tabct style display none ul li a href 只不過是打了個照面...